HTML and CSS Reference
In-Depth Information
Figure 6-8. Results of the selector :nth-child(3n+1) on an unordered list
The nth- selectors can also be given a concrete value that they should select, such
as :nth-child(2) to stylize only the second row, :nth-child(3) to stylize only
the third row, and so on.
The nth-of-type selectors, such as :nth-of-type(N) , have the ability to pick ele-
ments out of a group of elements of a certain type that share the same parent. So, instead
of picking the children elements of a particular element, these selectors pick the siblings
of a particular element. For example, the following HTML could be the structure of a
blog of some sort, with a header and footer section and a number of articles sandwiched
between the two:
<article><h1>Article 1</h1></article>
<article><h1>Article 2</h1></article>
<article><h1>Article 3</h1></article>
Because all these sections share the same parent (the body ), the :nth-of-
type(N) selector could be combined with a type selector to pick out a particular article
while ignoring the header and footer :
article:nth-of-type(1){ background-color:#f00; };
This would pick out the first article and color its background red (hexadecimal color
codes will be discussed later).
Search WWH ::

Custom Search