.example
#example
element.example
example
E#id
.class
#id
*
h1.hover
h1*hover
h1:hover
h1-hover
:target
:selection
::selection
URO
:root
:nth-of-type(n)
:only-child
none of the mentioned
Tag > Class > ID
Class > Tag > ID
ID > Class > Tag
Universal > ID > Class
content p
p.content
.content > p
p .content
[attr]
[attr=""]
[attr=*]
attr[ ]
Selects all elements
Selects all siblings after a specified element
Selects only the first sibling of a specified element
Selects only the last sibling of a specified element
tag
id
class
both class and tag
E ~ F
::after
:checked
None of these
#classname
.classname
element.classname
*classname
Selects the first child of an element
Selects all sibling elements
Selects the immediately next sibling of an element
Selects the parent of an element
E.class
E~F
E,F,G
div
Match the CSS User Action Pseudo-Class with Its Effect
A → 4, B → 3, C → 2, D → 1
A →5, B → 4, C → 3, D → 2
A → 6, B → 2, C → 3, D → 4
A → 5, B → 2, C → 3, D → 6
ul > li
ul li
ul + li
ul ~ li
Name
ID
Class
Tag
input:checked
input:focus
input:hover
input:active
focus
hover
active
checked
:valid
:required
:optional
:invalid
E[attr^=value]
E[attr$=value]
E[attr*=value]
:focus
:active
:hover
:visited
:nth-child(last)
:last-child
:nth-last-child(1)
Combinator selector
Pseudo Class selector
Pseudo elements selector
Attribute selector
Universal Selector (*)
Tag Selector
Class Selector
ID Selector
h1 h2 h3
h1+h2+h3
h1,h2,h3
h1>h2>h3
Match the CSS Sub-Selector with Its Meaning
A → 2, B → 1, C → 3, D → 6
A → 2, B → 1, C → 3, D → 4
A → 2, B → 5, C → 3, D → 4
A → 5, B → 1, C → 3, D → 4
:default
:%
:disabled
article
html
:element
:empty
:enabled
input.required
input[required]
input(required)
input::required
type
None of the above
mouse over
mouse hover
mouse move
Match the CSS Selector with Its Description
A →1, B →5, C → 3, D → 4
A → 2, B → 3, C → 1, D → 4
A → 2, B → 6, C → 4, D → 3
A → 5, B → 3, C → 2, D → 4
Match the CSS Attribute Selector with Its Function
A → 2, B → 6, C → 3, D → 4
~
>
+