1. Web
  2. CSS
  3. Reference
  4. Selectors
  5. 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).

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.

Syntax

css
selector::pseudo-element {
  property: value;
}

For example, ::first-line can be used to change the font of the first line of a paragraph.

css
/* The first line of every 
 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).

The specifications allow some pseudo-elements to be selected based on the current state of the originating element. In these cases, the pseudo-element is selected only when it is in the same state. For example, ::picker(select):hover selects the currently hovered descendant of a customizable of type="file".

::picker()

The picker part of an element, for example the drop-down picker of a customizable select element.

::picker-icon

The picker icon inside form controls that have an icon associated with them. In the case of a customizable select element, it selects the arrow that points down when the select is closed.

::placeholder

The placeholder text in an input field.

Alphabetical index

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 pseudo-elements

Non-standard vendor-prefixed pseudo-elements include:

-moz- prefix

-webkit- prefix

Nesting pseudo-elements

You can chain some pseudo-element selectors together to style pseudo-elements nested inside other pseudo-elements. The following nested pseudo-element combinations are supported:

Check out the individual pseudo-element reference pages for examples and browser compatibility information.

Highlight pseudo-elements inheritance

Highlight pseudo-elements, such as ::selection, ::target-text, ::highlight(), ::spelling-error, and ::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:

  1. Their parent elements (following normal inheritance).
  2. The highlight pseudo-elements of their parent elements (following highlight inheritance).

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

elements. Some of the included text content is contained directly inside the parent
, and some is nested inside the child
.

html

  Parent text
  
Child text

Next we include some CSS, which selects the parent and child

elements separately and gives them different color values, and selects the parent and child's selected text (::selection). This gives each
a different background-color and sets a different text color on the parent selection.

css
/* 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:

Try selecting the text in both the parent and child elements. Notice that:

  1. When you select the parent text, it uses the yellow background and red text color defined in .parent::selection.
  2. When you select the child text, it uses:
    • The orange background from .child::selection.
    • The red text color inherited from the parent's ::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:

css
: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:

css
/* This prevents highlight inheritance */
*::selection {
  color: lightgreen;
}

/* Prefer this to allow inheritance */
:root::selection {
  color: lightgreen;
}

Specifications

Specification
CSS Pseudo-Elements Module Level 4
CSS Positioned Layout Module Level 4
Unknown specification
WebVTT: The Web Video Text Tracks Format

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content