Skip to content

Instantly share code, notes, and snippets.

@itsdinkd
Created May 15, 2019 02:37
Show Gist options
  • Save itsdinkd/73c24ec174c0cb361d3125a09886e9a8 to your computer and use it in GitHub Desktop.
Save itsdinkd/73c24ec174c0cb361d3125a09886e9a8 to your computer and use it in GitHub Desktop.
CSS Selectors
Combinators and selector lists
Section
Using one selector at a time is useful, but can be inefficient in some situations. CSS selectors become even more useful when you start combining them to perform fine-grained selections. CSS has several ways to select elements based on how they are related to one another. Those relationships are expressed with combinators as follows (A and B represent any selector seen above):
Name Syntax Selects
Selector list A, B Any element matching A and/or B (see Groups of selectors on one rule, below - Group of Selectors is not considered to be a combinator).
Descendant combinator A B Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.). the combinator is one or more spaces or dual greater than signs.
Child combinator A > B Any element matching B that is a direct child of an element matching A.
Adjacent sibling combinator A + B Any element matching B that is the next sibling of an element matching A (that is, the next child of the same parent).
General sibling combinator A ~ B Any element matching B that is one of the next siblings of an element matching A (that is, one of the next children of the same parent).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment