CSS ::first-line selector allows you to select and style the first line of text of a selected element. However, the ::first-line selector only works with the block-level elements.
With this selector, you can not select the first line of inline elements i.e. the elements that have their display property set to inline.
The ::first-line selector in the following example selects the first line of each paragraph and set its color to red:
Example:
p::first-line{
color: red;
}
The ::first-line selector can inherit some styles from the element. But, if the two styles conflict, the ::first-line selector always wins.
That is, if you apply the same property to the element and the ::first-line, the styles written under the ::first-line will override those written under the element even if you have used the !important bash.
For example, the color of the first line of the paragraph in the below example will be red as it is not conflicting and is inherited from the element.
But the text-transform property is conflicting, therefore, its value specified in the ::first-line will override any other value specified by the element. This means the text-transform will be uppercase.
See this example:
Example:
p{
color: red;
text-transform: lowercase !important;
}
p::first-line{
text-transform: uppercase;
}
Please note that not all properties can be used the ::first-line selector.
Only the following properties can be used with the ::first-line
- All font-related properties
- All background-related properties
- The color property
- line-height
- text-decoration
- text-transform
- word-spacing
- letter-spacing
- vertical-align
- clear
However user agents may allow other properties as well.
CSS Syntax
The syntax of the ::first-line selector is as follows:
::first-line{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the ::first-line selector.
| Selector | |||||
| ::first-line | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
