files/en-us/web/css/reference/selectors/pseudo-elements/index.md
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
[!NOTE] This page is an index of all pseudo-elements in CSS. The CSS pseudo-elements page introduces the module that defines some, but not all, of these pseudo-elements.
selector::pseudo-element {
property: value;
}
For example, {{CSSxRef("::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;
}
Double colons (::) are used for pseudo-elements. This distinguishes pseudo-elements from pseudo-classes that use a single colon (:) in their notation. Note, browsers support single colon syntax for the original four pseudo-elements: ::before, ::after, ::first-line, and ::first-letter.
Pseudo-elements do not exist independently. The element of which a pseudo-element is a part is called its originating element. A pseudo-element must appear after all the other components in the complex or compound selector. The last element in the selector is the originating element of the pseudo-element. For example, you can select a paragraph's first line using p::first-line but not the first-line's children. So p::first-line > * is invalid.
A pseudo-element can be selected based on the current state of the originating element. For example, p:hover::first-line selects the first line (pseudo-element) of a paragraph when the paragraph itself is being hovered (pseudo-class).
[!NOTE] When a selector list contains an invalid selector, the entire style block is ignored.
::postfix and ::prefix sub-pseudo elements. These are not yet supported by any browser.Selects document sections based on content and document status, enabling those areas to be styled differently to indicate that status to the user.
These pseudo-elements behave like regular elements, fitting seamlessly within the box model. They act as a child element that can be styled directly within the originating element hierarchy.
These pseudo-elements are real elements that are not otherwise selectable.
part attribute.The pseudo-elements are related to form controls.
<option> element of a customizable select element to provide a visual indication of which one is selected.type="file".Pseudo-elements defined by a set of CSS specifications include the following:
A
B
C
D
F
G
H
M
P
S
T
V
Non-standard vendor-prefixed pseudo-elements include:
-moz- prefix-webkit- prefixYou can chain some pseudo-element selectors together to style pseudo-elements nested inside other pseudo-elements. The following nested pseudo-element combinations are supported:
::after::marker: Selects the {{CSSxRef("::marker")}} pseudo-element of an ::after pseudo-element, when ::after is styled as a list item, with {{CSSxRef("display", "display: list-item")}}.::before::marker: Selects the {{CSSxRef("::marker")}} pseudo-element of a ::before pseudo-element, when ::before is styled as a list item, with {{CSSxRef("display", "display: list-item")}}.Check out the individual pseudo-element reference pages for examples and browser compatibility information.
Highlight pseudo-elements, such as {{CSSxref("::selection")}}, {{CSSxref("::target-text")}}, {{CSSxref("::highlight()")}}, {{CSSxref("::spelling-error")}}, and {{CSSxref("::grammar-error")}}, follow a consistent inheritance model that differs from regular element inheritance.
When you apply styles to highlight pseudo-elements, they inherit from both:
This means that if you style both a parent element's highlight pseudo-element and a child element's highlight pseudo-element, the child's highlighted text will combine properties from both sources.
Here is a concrete example.
First, we have some HTML that includes two nested {{htmlelement("div")}} elements. Some of the included text content is contained directly inside the parent <div>, and some is nested inside the child <div>.
<div class="parent">
Parent text
<div class="child">Child text</div>
</div>
Next we include some CSS, which selects the parent and child <div> elements separately and gives them different {{cssxref("color")}} values, and selects the parent and child's selected text ({{cssxref("::selection")}}). This gives each <div> a different {{cssxref("background-color")}} and sets a different text color on the parent selection.
/* Style for the parent element */
.parent {
color: blue;
}
/* Style for the parent's selected text */
.parent::selection {
background-color: yellow;
color: red;
}
/* Style for the child element */
.child {
color: green;
}
/* Style for the child's selected text */
.child::selection {
background-color: orange;
}
The example renders as follows:
{{EmbedLiveSample("highlight_inheritance", , "150")}}
Try selecting the text in both the parent and child elements. Notice that:
.parent::selection..child::selection.::selection pseudo-element.This demonstrates how the child's highlight pseudo-element inherits from both its parent element and the parent's highlight pseudo-element.
CSS custom properties (variables) in highlight pseudo-elements inherit from their originating element (the element they're being applied to), not through the highlight inheritance chain. For example:
:root {
--selection-color: lightgreen;
}
::selection {
color: var(--selection-color);
}
.blue {
--selection-color: blue;
}
When using the universal selector with highlight pseudo-elements, it prevents highlight inheritance. For example:
/* This prevents highlight inheritance */
*::selection {
color: lightgreen;
}
/* Prefer this to allow inheritance */
:root::selection {
color: lightgreen;
}
{{Specifications}}