The rule below means

“change the letters of the first line of every <code>p</code> element to uppercase”:

The selector ''p::first-line''

does not match any real document element.

<div class="example" id="first-line-example">

For example, given an ordinary HTML [[HTML5]] paragraph such as:

&lt;P&gt;This is a somewhat long HTML paragraph

that will be broken into several lines.

The first line will be styled

Depending on the width of the element,

its lines might be broken as follows:

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

will be broken into several lines. The

first line will be by the ‘::first-line’

or alternately as follows:

THIS IS A SOMEWHAT LONG

HTML paragraph that will

be broken into several

Note: The [=first formatted line=] can be an empty line.

For example, the first line of the <code>p</code> in

doesn't contain any letters.

Thus the word “First” is not on the first formatted line,

and will not be affected by ''p::first-line''.

Note: The first line of a [=block container=]

that does not participate in a [=block formatting context=]

cannot be the first formatted line of an ancestor element.

the first formatted line of the <code>DIV</code> is not the line “Hello”,

but rather the (otherwise empty) line that contains that entire inline block.

<div class="example">

Consider the following markup:

&lt;DIV&gt;

&lt;P&gt;First paragraph&lt;/P&gt;

&lt;P&gt;Second paragraph&lt;/P&gt;

the elements’ ''::first-line'' pseudo elements,

it would be something like:

&lt;DIV&gt;

&lt;P&gt;&lt;DIV::first-line&gt;&lt;P::first-line&gt;First paragraph&lt;/P::first-line&gt;&lt;/DIV::first-line&gt;&lt;/P&gt;

&lt;P&gt;&lt;P::first-line&gt;Second paragraph&lt;/P::first-line&gt;&lt;/P&gt;

Consider the <a href="#first-line-example">earlier example</a>;

in case of the first rendering, the fictional tag sequence would be:

&lt;P&gt;<strong>&lt;p::first-line></strong>This is a somewhat long HTML paragraph

that<strong>&lt;/p::first-line></strong> will be broken into several lines.

The first line will be styled

And in the case of the second rendering:

&lt;P&gt;<strong>&lt;p::first-line></strong>This is a somewhat long<strong>&lt;/p::first-line></strong> HTML paragraph

that will be broken into several lines.

The first line will be styled

Suppose we mark up the earlier example

with a <code>span</code> element encompassing the first sentence:

&lt;P&gt;<strong>&lt;span></strong>This is a somewhat long HTML paragraph

that will be broken into several lines.<strong>&lt;/span></strong>

The first line will be styled

The effect of the first rendering

would be similar to the following [=fictional tag sequence=]:

that<strong>&lt;/span>&lt;/P&gt;&lt;p::first-line>&lt;span></strong> will be broken into several lines.<strong>&lt;/span></strong>

The first line will be styled

by the ‘::first-line’ pseudo-element.

on every paragraph following a level-2 header,

using the 'initial-letter' property defined in [[CSS-INLINE-3]]:

</div>

As explained in [[!CSS-TEXT-3]],

<div class="example">

Example:

selector ''p::first-letter'' matches the "N" of "Note".

</div>

Note: When the [=first formatted line=] is empty,

''::first-letter'' will not match anything.

For example, in this HTML fragment:

the first line doesn't contain any letters,

so ''::first-letter'' doesn't match anything.

In particular, it does not match the “F” of “First”,

the [=first-letter text=] of a [=block container=]

that does not participate in a [=block formatting context=]

cannot be the [=first-letter text=] of an ancestor element.

the first letter of the <code>DIV</code> is not the letter “H”.

In fact, the <code>DIV</code> doesn't have a first letter,

as its [=first formatted line=] contains no content besides the inline block.

The ''::first-letter'' pseudo-element is wrapped

immediately around the [=first-letter text=] it represents,

even if that text is in a descendant.

they are nested in the same order as their [=originating elements=].

[=Inheritance=] behaves accordingly.

<div class="example">

Consider the following markup:

&lt;div&gt;

&lt;p&gt;&lt;span&gt;The first few words&lt;/span>

and the rest of the paragraph.

to represent the elements’ ''::first-letter'' pseudo-elements,

it would be something like:

&lt;div&gt;

&lt;p&gt;&lt;span&gt;<strong>&lt;div::first-letter&gt;&lt;p::first-letter&gt;</strong>T<strong>&lt;/&hellip;&gt;&lt;/&hellip;&gt;</strong>he first few words&lt;/span>

and the rest of the paragraph.

If the characters that would form the [=first-letter text=]

are not all in the same element

the user agent may create a ''::first-letter'' pseudo-element

from one of the elements, or all elements,

or simply not create a pseudo-element.

<div class="example">

For example, if the following rules were applied:

p::selection { color: yellow; background: green; }

p > em::selection { color: orange; }

em::selection { color: red; }

</pre>

to the following markup:

&lt;p>Highlight this &lt;em>and this&lt;/em>.&lt;/p>

</pre>

The selection highlight would be green throughout,

<div class="example">

For example, if an author specified

::selection { background: blue; }

p.warning::selection { background: red; }

</pre>

and the document included

&lt;p class="warning">Some &lt;strong>very important information&lt;/strong>&lt;/p>

</pre>

The highlight would be blue over “very important information”

(Remember that ''*'' is implied when a tag selector is missing.)

The style rules that would give the intended behavior

(red highlight within <code>p.warning</code>, blue elsewhere) are

:root::selection { background: blue; }

p.warning::selection { background: red; }

</pre>

before the content of every <code>&lt;p></code> element

whose <code>class</code> attribute has the value <code>note</code>:

Since the initial value of 'display' is ''display/inline'',

this will generate an inline box.

For example, the following example should show a green border around the

file selector button:

</div>