CSS Selectors

Question 1

What does ul + p selector do?

Answer 1

Select only the first p that comes immediately after a ul.

Question 2

What does ul ~ p selector do?

Answer 2

Select any p elements that are siblings to ul even if they don’t follow immediately. Doesn’t cover p elements that come before, however.

Question 3

Find all images that end in .jpg

Answer 3

img [ src$=”jpg” ] (note: can’t have space between words)

Question 4

Find all tags with a link that begins with “http”;

Answer 4

a[href^=”http”]

Question 5

What is the pattern for finding elements based on attributes (not class or ID)? What if a word is first, last, or appears anywhere?

Answer 5

elementName[attr=value];

elName[attr^=value], *[attr$=value], etc.

Question 6

Find all elements that have a style set on them by javascript no matter what type of element.

Answer 6

*[style]

Question 7

Find all radio buttons that are checked

Answer 7

input[type=”radio”]:checked

Question 8

Select every second item in a list

Answer 8

li:nth-child(2n);

Question 9

Select just the second to last item in a list

Answer 9

li:nth-last-child(2);

Question 10

Select every other child paragraph of a div

Answer 10

div > p:nth-of-type(2n)

Question 11

Select the first, last, or only element in a collection.

Answer 11

:first-child | :first-of-type | :last-child | only-child

Question 12

Select first letter or first line of a paragraph

Answer 12

::first-letter or ::first-line (note double color for pseudo elements)

Question 13

Select all classes ending in “-area” (e.g. class=”title-area” or “content-area”)

Answer 13

[class$=”-area”] { …