Pseudo-elements

  • Revision slug: CSS/Pseudo-elements
  • Revision title: Pseudo-elements
  • Revision id: 237870
  • Created:
  • Creator: jjoemb
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

{{ CSSRef() }}

Summary

Just like {{ Cssxref("pseudo-classes") }}, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the {{ Cssxref("::first-line") }} pseudo-element targets only  the first line of a element specified by the selector.

Syntax

selector:pseudo-element {
  property: value;
}

All pseudo-elements

  • {{ Cssxref(":after") }}
  • {{ Cssxref(":before") }}
  • {{ Cssxref("::first-letter") }}
  • {{ Cssxref("::first-line") }}
  • {{ Cssxref("::selection") }}

Notes

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

Note: ::selection always starts with double colons (::).

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

{{ languages( { "fr": "fr/CSS/Pseudo-éléments", "ja": "ja/CSS/Pseudo-elements" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>Just like {{ Cssxref("pseudo-classes") }}, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the {{ Cssxref("::first-line") }} pseudo-element targets only  the first line of a element specified by the selector.</p>
<h3>Syntax</h3>
<pre>selector:pseudo-element {
  property: value;
}
</pre>
<h3>All pseudo-elements</h3>
<ul> <li>{{ Cssxref(":after") }}</li> <li>{{ Cssxref(":before") }}</li> <li>{{ Cssxref("::first-letter") }}</li> <li>{{ Cssxref("::first-line") }}</li> <li>{{ Cssxref("::selection") }}</li>
</ul>
<h3>Notes</h3>
<p>Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.</p>
<div class="note"><strong>Note:</strong> <code>::selection</code> always starts with double colons (::).</div>
<p class="note">You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.</p>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>8.0</td> <td><code>:pseudo-element</code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:pseudo-element</code></td> </tr> <tr> <td>1.0 (1.5)</td> <td><code>:pseudo-element ::pseudo-element<br> </code></td> </tr> <tr> <td rowspan="2">Opera</td> <td>4.0</td> <td><code>:pseudo-element</code></td> </tr> <tr> <td>7.0</td> <td><code>:pseudo-element ::pseudo-element<br> </code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td><code>:pseudo-element ::pseudo-element<br> </code></td> </tr> </tbody>
</table>
<p>{{ languages( { "fr": "fr/CSS/Pseudo-éléments", "ja": "ja/CSS/Pseudo-elements" } ) }}</p>
Revert to this revision