Css 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 B::backdrop
This is an experimental API that should not be used in production code.::before (:before)
::part()
This is an experimental API that should not be used in production code.::placeholder
This is an experimental API that should not be used in production code.
::selection
::slotted()
::spelling-error
This is an experimental API that should not be used in production code.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 1 | Recommendation | Defined pseudo-classes and pseudo-elements. |
Comments
Post a Comment