Pseudo-elements
Quick Summary for Pseudo-elements
::first-line
can be used to change the font of the first line of a paragraph.
Code Usage for Pseudo-elements
/* The first line of every <p> element. */ p::first-line { color: blue; text-transform: uppercase; }
More Details for Pseudo-elements
Pseudo-elements
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line
can be used to change the font of the first line of a paragraph.
/* The first line of every <p> element. */ p::first-line { color: blue; text-transform: uppercase; }
Note: In contrast to pseudo-elements, pseudo-classes
can be used to style an element based on its state.
Syntax
selector::pseudo-element { property: value; }
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
Note: As a rule, double colons (::
) should be used instead of a single colon (:
). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.
Index
Pseudo-elements defined by a set of CSS specifications include the following:
A
::after (:after)
B
::backdrop
::before (:before)
C
::cue
::cue-region
F
::first-letter (:first-letter)
::first-line (:first-line)
::file-selector-button
G
::grammar-error
M
::marker
P
::part()
::placeholder
S
::selection
::slotted()
::spelling-error
T
::target-text
Specifications
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # pseudo-element-selectors |
Browser | Lowest Version | Support of |
---|---|---|
Internet Explorer | 8.0 | :pseudo-element |
9.0 | :pseudo-element ::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 |
See also
Pseudo-classesLast modified: Feb 22, 2022, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language