first-line Selector

first-line Selector

CSS first-line Selector reference

The CSS first-line pseudo-element selector ( X::first-line { } ) is used to target the first line within elements.

CSS CODE EXAMPLE

<!DOCTYPE html>
<style type="text/css">
p::first-line {
    color:#F00;
}
ul::first-line {
    color:#F00;
}
</style>
<p>My paragraph content...<br /> keeps going...<br />and going...</p>
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

My paragraph content...
keeps going...
and going...

List item
List item
List item

This can also be written as a grouped rule to produce the same style for both elements.

CSS CODE EXAMPLE

<style type="text/css">
p::first-line, ul::first-line {
    color:#F00;
}
</style>
<p>My paragraph content...<br /> keeps going...<br />and going...</p>
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

My paragraph content...
keeps going...
and going...

List item
List item
List item

click here to code.

first-line Selector

0 Response to "first-line Selector"

Post a Comment