CSS selectors are an essential part of creating stylish and engaging web pages. They allow developers to target specific elements of a page and apply styling rules to them. Selectors can target elements based on their tag name, class name, ID, attributes, and more.
With so many different types of selectors available, it can be challenging to keep track of them all. That’s where this CSS selector cheat sheet comes in handy. It provides a comprehensive list of all the different types of selectors and their corresponding descriptions.
Cheat Sheet
Universal Selectors
Selector
Description
*
Selects all elements
Type Selectors
Selector
Description
tagname
Selects all elements of the specified tag name
Class Selectors
Selector
Description
.classname
Selects all elements with the specified class name
ID Selectors
Selector
Description
#idname
Selects the element with the specified ID
Attribute Selectors
Selector
Description
[attribute]
Selects all elements that have the specified attribute
[attribute=value]
Selects all elements where the specified attribute has the specified value
[attribute~=value]
Selects all elements where the specified attribute contains the specified value as one of its words
[attribute
=value]
Descendant Selectors
Selector
Description
ancestor descendant
Selects all descendants of the specified ancestor element
Child Selectors
Selector
Description
parent > child
Selects all direct children of the specified parent element
Adjacent Sibling Selectors
Selector
Description
element + sibling
Selects the specified sibling element that is immediately following the specified element
General Sibling Selectors
Selector
Description
element ~ sibling
Selects all sibling elements that follow the specified element
Pseudo-Classes
Selector
Description
:active
Selects the active link
:checked
Selects all checked elements
:disabled
Selects all disabled elements
:empty
Selects all elements that have no children
:enabled
Selects all enabled elements
:first-child
Selects the first child element of its parent
:first-of-type
Selects the first element of its type
:focus
Selects the element that has focus
:hover
Selects an element when the mouse pointer is over it
:last-child
Selects the last child element of its parent
:last-of-type
Selects the last element of its type
:not(selector)
Selects all elements that do not match the specified selector
:nth-child(n)
Selects the nth child element of its parent
:nth-last-child(n)
Selects the nth child element of its parent, counting from the last child
:nth-last-of-type(n)
Selects the nth element of its type, counting from the last element
:nth-of-type(n)
Selects the nth element of its type
:only-of-type
Selects the only element of its type
:only-child
Selects the only child element of its parent
:root
Selects the document’s root element
:target
Selects the current active element in the document’s URL
Pseudo-Elements
Selector
Description
::after
Inserts content after the selected element
::before
Inserts content before the selected element
::first-letter
Selects the first letter of the selected element
::first-line
Selects the first line of the selected element
::selection
Selects the portion of an element that is selected by the user