CSS Selector Cheat Sheet
Descendant selectors
To select all h1 element.
h1
To select all p element inside div element.
div p
To select all div element and all p element.
div, p
To select all p element where div element is parent.
div > p
To select all hyperlink element inside p.
div > p > a
To select all element inside div.
div > *
To select root element.
:root
To select the div element inside body.
:root > body > div
Order selectors
To select first child of ul.
ul > li:first-child
To select third child of ul element.
ul > li:nth-child(3)
To select last child element.
ul > li:last-child
To select first element with attribute.
li#id_of_li:first-child
To select first hyperlink from body.
a:first-child
To select last hyperlink in the body.
a:last-child
Attribute selectors
To select the element with id.
#some_id
To select element with class name
.class_name
To select all element with href attribute.
[href]
To select element with class attribute value class1 and class2.
.class1.class2
To select an element with class attribute value class2 which is descendant of an element with class attribute value class1.
.class1 .class2
To select a submit button.
input[type="submit"]
To select an element with multiple attribute value.
div#some_id[data="some_value"]
To select an element with attribute name data.
div[data]
To select an element having an attribute value starts with.
div[class^='my_']
To select all elements with a class attribute value equal to my or starting with my.
div[class|='my']
To select an element having an attribute value ends with.
div[class$='_class']
To select an element which contains attribute value.
img[src*='icon']
To select an element which does not contain attribute value.
img[src~='icon']
Siblings
To select every p element that is preceded by div element with id some_id.
div#some_id ~ p
To select first p element that is placed immediately after div element with id some_id.
div#some_id + p
To select all div except with class value failed
div:not([class='failed'])
Miscellaneous
To select an active element.
a:active
To select all checked input element.
input:checked
To selects the default input element.
input:default
To selects all disabled input element.
input:disabled
To selects all p element that has no children.
p:empty
To selects all enabled input element.
input:enabled
To select the first letter of every p element.
p::first-letter
To select the first line of every p element.
p::first-line
To select every p element that is the first p element of its parent.
p:first-of-type
To select the input element which has focus.
input:focus
To select h2 elements that are immediately followed by a p element.
h2:has(+p)
To select all p element that is the last p element of its parent.
p:last-of-type
To select all unvisited links.
a:link
To select all visited links.
a:visited
To select all p element that is the second p element of its parent, counting from the last child.
p:nth-last-of-type(2)
To select all p element that is the second p element of its parent.
p:nth-of-type(2)
To select all p element that is the only p element of its parent.
p:only-of-type
To select all p element that is the only child of its parent.
p:only-child
To select input elements with no required attribute.
input:optional
To select input elements with the placeholder attribute specified.
input::placeholder
To select input elements with the readonly attribute specified.
input:read-only
To select input elements with the required attribute specified.
input:required