HTML and CSS Reference
In-Depth Information
For example, you can target the first paragraph that is a direct child of a
particular
div
, and capitalize its first line:
.post > p:first-of-type:first-line {
font-variant: small-caps;
}
With this selector you make sure that you are targeting only paragraphs that
are direct children of the “post”
div
, and that are the first to match our
p
element.
The
:last-of-type
pseudo-class works exactly the same, but targets the
last
child of its type instead.
:ONLY-CHILD
The
:only-child
pseudo-class represents an element that is the only
child of its parent.
Let's say you have several boxes (“news”) with paragraphs of text inside
them. When you have more than one paragraph, you want the text to be
smaller than when you have only one:
div.news > p {
font-size: 1.2em;
}
div.news > p:only-child {
font-size: 1.5em;
}
In the first selector, we are defining the overall size of the
p
elements that
are direct children of a “news”
div.
On the second one, we are overriding
the previous font-size by saying, if the
p
element is the only child of the
“news”
div
, its font size should be bigger.
