HTML and CSS Reference
In-Depth Information
Figure 3-3 A light blue background color applied to p:nth-child(1).
The <p> element within the “What Our Customers Are Saying” section is given a light blue background because
that is the only <p> element to be a first child among its siblings. The first child <p> elements within the content
and newsletter sections are headings and not paragraphs, which is why the first paragraphs in those particular sec-
tions are not given the same background color.
Be aware that :nth-child(1) represents the first element, which can also be expressed as :first-child .
Similarly, you can use :last-child to select the last element, or if you want to start counting from the last child,
you can use :nth-last-child() , where :nth-last-child(1) is the last element and :nth-last-
child(2) is the element next to the last.
You can also select an element if it is the only child of its parent (it has no siblings), using :only-child .
nth-child() isn't supported in Internet Explorer versions 6, 7, and 8.
Selecting Child Elements of a Particular Type
Where :nth-child() selects a child element based on its position among its siblings (regardless of what types of
element they are), :nth-of-type() does the same but counts only siblings of the same type:
Search WWH ::

Custom Search