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:
<body>
<header></header>
<article><h1>Article 1</h1></article>
<article><h1>Article 2</h1></article>
<article><h1>Article 3</h1></article>
<footer></footer>
</body>
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