Created
May 15, 2019 02:37
-
-
Save itsdinkd/73c24ec174c0cb361d3125a09886e9a8 to your computer and use it in GitHub Desktop.
CSS Selectors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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