CSS selectors by pseudo-class.
Pseudo-classes.
These selectors refer to elements when they are in a particular state. For example, the pseudo-class :hover designates an element
while the mouse is hovering over it.
Another example: the :visited selector refers to hyperlink links, but only when they have already been visited.
In general, pseudo-classes refer to elements that are identified in the HTML code by a tag but are also in a particular state.
Pseudo-classes are distinguished from pseudo-elements in that the latter can correspond to elements that are not identified by an HTML tag.
For example, the pseudo-element ::first-letter refers to the first letter of a text, even though no HTML tag delineates this first letter.
One can also say that pseudo-classes apply to entire elements in a particular state, whereas pseudo-elements refer to parts of elements.
Pseudo-class type selectors start with the colon character ( : ).
Used alone, pseudo-classes apply to all tags, but it is easy to combine a classic selector with a pseudo-class to limit its scope. Example:
:visited designates all the links already visited.
.externe:visited refers to the links already visited that have the attribute class="externe".
List of pseudo-classes.
CSS Overflow Module
:target-current
Pseudo-class that targets the scroll marker for the displayed page.
CSS Paged Media Module
CSS View Transitions Module
:active-view-transition
Targets the root of the document, during a view transition.
:active-view-transition-type()
Targets the root of the document, during a view transition of a certain type.
Selectors
:active
A pseudo class targeting the element that is active (the one that is clicked or tapped).
:any()
Obsolete pseudo-class, replaced by the new pseudo-class :is().
:any-link
Pseudo-class targeting all links (visited or not), in other words, all elements that have an
href attribute.:autofill
:blank
:buffering
Pseudo-class targeting an element that is waiting for data (such as a video for example).
:checked
:closed
A pseudo-class that targets an element that can be either opened or closed (such as a
select menu), and that is in the closed state.:default
Pseudo-class targeting checkboxes and radio buttons that are checked by default.
:defined
Pseudo-class targeting defined elements (variable concept depending on the language).
:dir()
:disabled
Pseudo-class targeting locked input areas (those that have the
disabled attribute).:empty
Pseudo-class targeting elements without content.
:enabled
:first-child
Pseudo-class targeting the first child of an element, in the document order.
:first-of-type
Pseudo-class targeting the first elements of each type, in the order of the document.
:focus
A pseudo-class targeting the input area that has focus.
:focus-visible
A pseudo-class targeting the input area that has focus, but only if the browser materializes this focus (by a thicker border for example).
:focus-within
A pseudo-class targeting the input box that has focus, as well as the corresponding form.
:fullscreen
A pseudo-class designating elements displayed in full screen during the time they are displayed in full screen.
:has()
Pseudo-class targeting an element of which at least one of the children corresponds to one of the selectors passed as an argument.
:hover
A pseudo-class targeting the element on which the mouse cursor is located.
:in-range
:indeterminate
Pseudo-class referring to input fields whose value is indeterminate.
:invalid
Pseudo-class targeting input areas containing invalid information.
:is()
Pseudo-class allowing complex syntaxes involving several selectors to be simplified.
:lang()
Pseudo-class targeting elements based on their language.
:last-child
Pseudo-class targeting the last child of an element in the document order.
:last-of-type
Pseudo-class targeting the last elements of each type in the document order.
:link
Pseudo-class targeting unvisited hyperlinks.
:local-link
Pseudo-class targeting internal links, excluding links pointing to another domain.
:matches()
Obsolete pseudo-class, replaced by the new pseudo-classe :is().
:modal
Pseudo-class designating elements displayed in modal: which block interactions with other elements.
:muted
Pseudo-class targeting an element capable of producing sound, but whose user has muted the sound.
:not()
Pseudo-class to reverse the action of a selector.
:nth-child()
Pseudo-class targeting a descendant based on its position in the document order.
:nth-col()
Pseudo-class targeting one of the columns in a grid container based on its number.
:nth-last-child()
Pseudo-class targeting an element based on its number, starting from the end, and in document order.
:nth-last-col()
Pseudo-class targeting one of the columns in a grid container, starting the count from the end.
:nth-last-of-type()
Pseudo-class targeting an element by its number, counting only elements of the same type and starting from the end.
:nth-of-type()
Pseudo-class targeting an element based on its number, counting only elements of the same type.
:only-child
Pseudo-class targeting elements that are the only children of their parent.
:only-of-type
Pseudo-class indicating elements that are the only child of their parent, considering only elements of the same type.
:open
A pseudo-class that targets elements that can be either opened or closed (such as
select), and that are in the open state.:optional
:out-of-range
:paused
Pseudo-class targeting elements whose playback has been suspended by the user (for example, a video).
:picture-in-picture
A pseudo class designating an element (most often a video) displayed in a window that does not scroll with the rest of the page.
:placeholder-shown
:playing
Pseudo-class targeting the elements currently being played (for example, a video).
:popover-open
Pseudo-class that targets popover elements that are in the open (or visible) state.
:read-only
:read-write
:required
:root
Pseudo-class targeting the root element of the document (in HTML, the root element is the HTML element).
:scope
Targets the current element. Useful inside an
@scope directive.:seeking
Pseudo-class targeting elements (video, for example) whose content is in the process of being searched for a position at the user's request.
:stalled
Pseudo-class designating an element (a video for example) whose playback is interrupted due to an error in stream acquisition.
:target
A pseudo-class targeting the element whose id is in the url (bookmark).
:target-within
A pseudo-class targeting the parent container of the element whose id is in the url.
:user-invalid
:user-valid
:valid
Pseudo-class designating input fields containing valid information.
:visited
Pseudo-class targeting hyperlinks that have already been visited.
:volume-locked
Pseudo-class targeting an element capable of producing sound, and whose volume has been fixed at a specific value.
:where()
Pseudo-class allowing you to group selectors (equivalent to logical OR).