[CSS Selector] E:first-line

Using selector:first-line, you can apply styles to the first rendered line of an element. This is commonly called a "pseudo-element." It does not work in IE8 or earlier.

Note that this applies to the first line as rendered by the browser, not the first line in the source code. Additionally, :first-line only works when the display property is set to block, inline-block, table-cell, table-caption, etc. It does not apply to inline elements.

Sample Code

p:first-line { color: red;} /* Makes the first rendered line red. */

Browser Preview

p:first-line { color: red;} /* Makes the first rendered line red. */

<p>
	The first rendered line becomes red.
	Note that this is not the first line of the source code.<br>
</p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 △

7 △

6 △

Opera

7+ ○

6 △

5 △

4 △

↑ Supported as ':first-line'

2 or earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN.

Home

Tweet

シェアする