Taming Advanced CSS Selectors - CSS Essentials - page 251

If you've been paying attention, you'll know that this means the paragraph
that comes immediately after an h1 tag (“+”) should have its first line in small
caps.
You could also refer to the first line of a particular div , without having to
refer to the actual paragraph tag:
div.post p::first-line { font-variant: small-caps; }
Or go one step farther and target specifically the first paragraph within a
particular div :
div.post > p:first-child::first-line {
font-variant: small-caps;
}
Here, the “ > ” symbol indicates that you are targeting a direct child the post
div , so if the paragraph were to be inside a second div , it wouldn't match
this selector.
::FIRST-LETTER
The ::first-letter pseudo-element will match the first letter of a block,
unless it's preceded by some other content, like an image, on the same line.
Like the ::first-line pseudo-element, ::first-letter is commonly
used to add typographical details to text elements, like drop caps or initials.
Here is how you could use the ::first-letter pseudo-element to
create a drop cap:
p {
font-size: 12px;
}