Selectors by pseudo-elements.

Pseudo-elements.

These selectors refer to elements that are not necessarily delimited by HTML tags. For example, the pseudo-element ::first-letter refers to the first letter of the text of an element, even though no HTML tag delimits this first letter.

Do not confuse pseudo-elements and pseudo-classes. The distinction is as follows:

• Pseudo-classes refer to a state of an element, for example, a link that has already been visited, an element hovered over by the mouse, etc.
• Pseudo-elements target a part of an element. For example, ::first-line refers to the first line of text of the element.

The names of pseudo-elements start with a double colon ( :: ).
Note! Browsers generally recognize the simple colon for both pseudo-classes and pseudo-elements. This is due to the fact that previous versions of CSS did not differentiate between pseudo-classes and pseudo-elements.

Used alone, pseudo-elements apply to all tags, but it is easy to combine them with a classic selector to limit their scope:

    ::first-letter   targets the first letter of all elements that contain text.
    h1::first-letter   target the first letter of the titles h1.

CSS Overflow Module

⚠

::scroll-button()

Targets the scroll buttons. The value passed as a parameter more precisely indicates which button should be targeted.

⚠

::scroll-marker

Pseudo-element that individually target the scrolling markers.

⚠

::scroll-marker-group

Pseudo-element that targets the scroll marker container.

CSS Pseudo-Elements Module

::after

A pseudo-element designating the location immediately after an element.

::before

A pseudo-element designating the location immediately before an element.

::details-content

This pseudo-element targets the detailed content of a details tag.

::file-selector-button

Targets the button in an input box of type file. This button has a different appearance in each browser.

::first-letter

A pseudo-element targeting the first letter of the paragraph.

::first-line

A pseudo-element targeting the first line of the paragraph.

⚠

::grammar-error

Peudo-elements targeting texts with spelling mistakes (::spelling-error) or grammar errors (::grammar-error).

::highlight()

Pseudo-element that targets the text selected after a search in the browser.

✗

::inactive-selection

Targets the selected element or text when the window it is on is not active.

::marker

A pseudo-element designating the marker in a list (bullet or number).

::placeholder

A pseudo-element designating the placeholder text in an input box (placeholder attribute).

⚠

::prefix

Target the punctuation characters that can precede the first letter of an element. Allows for a different styling of the first letter and the characters that come before it.

⚠

::search-text

Target the text searched by the internet user (browser search zone CTRL+F).

::selection

A pseudo-element that targets user-selected content.

::spelling-error

A pseudo-element that targets words or text with orthograph misspellings.

⚠

::suffix

Target the punctuation characters that may follow the first letter of an element. Allows for different styling of the first letter and the punctuation characters that follow it.

::target-text

Targets the text of the item designated by the url bookmark.

CSS View Transitions Module

::view-transition

Pseudo-element targeting elements during the time of a viewtransition.

::view-transition-group()

Targets a group of elements created during a view transition.

::view-transition-image-pair()

Targets the two screenshots taken for the purposes of a view transition.

::view-transition-new()

Targets the screenshot of the new state, in the case of a View Transition.

::view-transition-old()

Targets the screenshot of the previous state, in the case of a view transition.

Selectors

The Web Video Text Tracks Format

::cue