HTML and CSS Reference
In-Depth Information
SELECTING BY TYPE OF ELEMENT
Sometimes, if the structure is likely to
vary, the element you want to select isn't
consistently the first or last (or second or
third) child. Here each article has a pic-
ture, but it's located in a different place in
each one:
<header>
<h1>Header</h1>
</header>
<article>
<h1>Article 1</h1>
<img src="example.png">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</article>
<article>
<h1>Article 2</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<img src="example.png">
</article>
<footer>
Body footer
</footer>
How would you write a selector for the
last paragraph of each article? Or could
you select the first article? Let's try using
:first-child and :last-child
:
article:first-child {
background-color: #000;
}
p:last-child {
background-color: #000;
}
As the screenshot shows, these rules have
no effect. The naive solution fails because
neither
<article>
nor
<p>
is the first child
of any container.
