Here's a visual guide to the most popular CSS selectors.
CSS-Selectors describes CSS selectors, which are patterns used to select and style HTML elements. It serves as a visual guide and reference to these selectors.
Here's a summary of its main points:
CSS selectors are used to apply styles to specific HTML elements.
The guide covers traditional CSS selectors, pseudo-classes, and pseudo-elements.
Pseudo-classes style elements based on their state or relation to other elements and start with a single colon (:), like :hover
.
Pseudo-elements style specific parts of an element and start with double colons (::), such as ::before
.
The guide lists various selectors such as universal (*
), element, class (.class
), ID (#id
), and combinations of classes and IDs.
It explains combinators like comma (,
), descendant (space), adjacent (+
), child (>
), and general sibling (~
) selectors.
The guide also covers attribute selectors that target elements with specific attributes or attribute values using brackets []
.
It lists pseudo-classes for links (:link
, :visited
, :hover
, :active
), input focus (:focus
), checked inputs (:checked
), enabled or disabled inputs (:disabled
, :enabled
), valid or invalid inputs (:valid
, :invalid
), required or optional inputs (:required
, :optional
), and more.
The guide provides pseudo-classes for selecting elements based on their position within a parent: first child (:first-child
), last child (:last-child
), nth child (:nth-child
), nth-last-child (:nth-last-child
), only child (:only-child
), first of type (:first-of-type
), last of type (:last-of-type
), nth-of-type (:nth-of-type
), nth-last-of-type (:nth-last-of-type
), and only of type (:only-of-type
).
It includes the :target
pseudo-class for selecting elements with an ID that matches the URL fragment.
The guide also describes functional pseudo-classes like :not()
for excluding elements and :has()
for styling an element based on its contents.
It covers pseudo-elements to insert content before (::before
) or after (::after
) an element, style the first letter (::first-letter
) or line (::first-line
), style input placeholders (::placeholder
), selection (::selection
), and list markers (::marker
).
Additional pseudo-classes are also mentioned including :root
, :is()
, :where()
, :default
, :empty
, :fullscreen
, :in-range
, :out-of-range
, :indeterminate
, :read-only
, :read-write
and :lang()
.
The document also lists various SVG generators, tools and design resources.
In short, this document is a comprehensive guide to CSS selectors, which are essential for styling web pages.