CSS: Selector Syntax
Here's complete list of CSS Selectors syntax. For a tutorial, see CSS: Selector Tutorial
*
-
Match any element.
[see HTML Tags Complete List]
Example, make everything red:
* {color:red;}
T
-
Match any element with tag name T.
Example, make all paragraphs red:
p {color:red;}
matches
<p>something</p>
Match Attribute
Match Nested Structure
These allow you to match based on nesting structure.
expr1>expr2
-
(this is called Child combinator)
Match any expr2 that is a direct child (first-level nesting) of expr1.
Each of the expr can be compound selector, such as with CSS: Attribute Selectors
Example, make red of span that's direct child of div:
div > span {color:red;}
matches
<div> <span t="x">some</span> </div>
doesn't match
<div> <p> <span t="x">some</span> </p> </div>
expr1 expr2
-
(This is called Descendant combinator)
Match any expr2 that is nested inside expr1 at any level.Each of the expr can be compound selector, such as with CSS: Attribute Selectors
Example, make red any span that's nested in div:
div span {color:red;}
matches:
<div> <p> <span t="x">some</span> </p> </div>
:root
-
Match the root element. (no parent)
In HTML, this is the
html
tag. In XML, it may be other. e.g. in SVG, this is thesvg
tag[see HTML: the Root Element]
T:empty
-
Match T that has no children. That is, with no inner text.
It must not have any inner-text, not even space or newline.
T:only-child
- Match T if it's the only child.
T:first-child
-
same as
T:nth-child(1)
.
Example:span:first-child {color:red;}
Match “span” only when it is the 1st child. (Note, this is different from “match the 1st span”) T:nth-child(n)
- Match T only if it is nth child element. (counting start at 1. Cannot be negative.)
T:last-child
-
same as
T:nth-last-child(1)
T:nth-last-child(n)
- count from right, starting at 1.
Match Child Structure and Tag Name
T:nth-of-type(n)
- Match T that is nth sibling of name T. Count starts at 1.
T:nth-last-of-type(n)
-
same as
T:nth-of-type(n)
but counting from right. T:first-of-type
-
same as
T:nth-of-type(1)
T:last-of-type
-
same as
T:first-of-type
but the last. T:only-of-type
-
Match T if it is the only type (tag name) among siblings.
Example:
span:only-of-type {color:red;}
<div> <div>11</div> <span>22</span> <span>33</span> </div> <div> <div>AA</div> <span>BB</span> <div>CC</div> </div>
In the above example, only the BB will be colored, because that span is the only span tag among siblings.
Match Sibling Structure
These allow you to match based on elements based on sibling relationship.
expr1+expr2
-
(this is called Next-sibling combinator)
Match any expr2 immediately preceded by expr1. (expr1 and expr2 are siblings, with expr1 coming first.)
Each of the expr can be compound selector, such as with CSS: Attribute Selectors
span+b {color:red;}
matches the B:
<div> <span>A</span> <b>B</b> </div>
expr1~expr2
-
(this is called Subsequent-sibling combinator)
Match any expr2 that is a sibling of expr1 and comes after expr1.
Each of the expr can be compound selector, such as with CSS: Attribute Selectors
Negation
T:not(T2)
- Match element with tag name T if it does not match tag T2.
Grouping Selectors (syntax shortcut)
This allows you to specify multiple selectors together.
expr1, expr2 etc
-
Match any selector expression expr1, expr2, expr3 etc.
Each of the expr can be compound selector, such as with CSS: Attribute Selectors
Example, make red of all div of class x, or any span:
div.x, span {color:red;} /* same as */ div.x {color:red;} span {color:red;}
Pseudo-Class Selectors
T.warning
- an T element belonging to the class warning (the document language specifies how class is determined)
Reference
- [Selectors Level 3 By W3C. At https://www.w3.org/TR/2018/REC-selectors-3-20181106/ ]
2013-08-18 thanks to Brennan Young for correction on nth child.