CSS Selectors - The Ultimate List
As a front-end developer who writes approximately 238 lines of CSS every day I needed this. Nothing in the following text is really mine (even though they said that I always added something special...), it is just collected from sources which are available to everyone (not just w3schools). At the bottom, you have this ULTIMATE LIST image which you can easily download, no welcome!
Pay attention to spaces!
Absolute Evergreens
*
All elements are selected.
.banana
All elements with class banana are selected.
#banana
The element with id banana is selected.
p
All <p> elements are selected.
Relative Evergreens
div, p
All <p> and <div> elements are selected.
div p - descendent selector
All <p> elements inside <div> elements are selected.
div > p - direct children
All <p> elements whose direct parent is <div> are selected.
It works backwards too (p < div)
div + p
All <p> elements places immediately after <div> element are selected.
div ~ p
All <p> elements that are preceded by a <div> element are selected.
Specific Category
This class is often used for attributes :target, title, lang and href.
[title]
All elements with the title attribute are selected.
[title=banana]
All elements which have the 'banana' value of the title attribute.
[title~=banana]
All elements which contain 'banana' in the value of the title attribute.
[title|=banana]
All elements which value of the title attribute starts with 'banana'.
[title^=banana]
All elements which value of the title attribute begins with 'banana'.
[title$=banana]
All elements which value of the title attribute ends with 'banana'.
[title*=banana]
All elements which value of the title attribute contains the substring 'banana'.
Quasi-Evergreens
These selectors are called pseudo classes and they must stay with other selector and describe its state or property
:hover
Selects elements when it is in the hover state.
:link
Selects elements if they are links (once with href attribute).
:visited
Selects elements if they have been visited.
:active
Selects elements when they are active (clicked).
:focus
Selects elements when they are focused.
:checked
Selects elements when they are checked.
:required
Selects elements with the required attribute.
:optional
Selects elements without the required attribute.
:first-child
Selects the first element within a parent.
:nth-child(number)
Selects the child element based on a number (if it's 2 then selects a second child, if it's 2n then selects all the children in steam positions).
:only-child
Selects element only if it's the only child.
:first-of-type
Selects the first element of the type.
:nth-of-type(number)
Selects the child element of the type based on a number (if it's 2 then selects second of the type, if it's 2n then selects all children of the type in steam positions).
:only-of-type
Selects elements only if they are of a specific type.
:empty
Selects elements which contain no text or child elements.
For more pseudo classes check this post
The next few selectors are called Pseudo Elements and they select just parts of elements
::before:
Add content before the element (e.g. an opening quote, icon, image...).
::after
Add content after the element (e.g. a closing quote, clearfix...).
::first-letter
Selects the first letter of the element.
::first-line
Selects the first line of the element.
::selection
Selects a part of the element which is selected.
Indie Hit
* + * - lobotomized owl
All elements that procede other elements.
For more posts about CSS, subscribe to our newsletter.
Creating
software solutions
that work
