css-selectors
css-selectors css-selectors css-selectors

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.