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!
All elements are selected.
All elements with class banana are selected.
The element with id banana is selected.
All <p> elements are selected.
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 backwords 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.
This class is often used for attributes :target, title, lang and href.
All elements with the title attribute are selected.
All elements which have the 'banana' value of the title attribute.
All elements which contain 'banana' in the value of the title attribute.
All elements which value of the title attribute starts with 'banana'.
All elements which value of the title attribute begins with 'banana'.
All elements which value of the title attribute ends with 'banana'.
All elements which value of the title attribute contains the substring 'banana'.
These selectors are called pseudo classes and they must stay with other selector and describe it's state or property
Selects elements when it is in the hover state.
Selects elements if they are links (once with href attribute).
Selects elements if they have been visited.
Selects elements when they are active (clicked).
Selects elements when they are focused.
Selects elements when they are checked.
Selects elements with the required attribute.
Selects elements without the required attribute.
Selects the first element within a parent.
Selects the child element based on a number (if it's 2 then selects second child, if it's 2n then selects all the children in steam positions).
Selects element only if it's the only child.
Selects the first element of the type.
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).
Selects element only if it's only of the type.
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
Add content before the element (e.g. an opening quote, icon, image...).
Add content after the element (e.g. a closing quote, clearfix...).
Selects the first letter of the element.
Selects the first line of the element.
Selects a part of the element which is selected.
* + * - lobotomized owl
All elements that procede other elements.
For more posts about CSS, subscribe to our newsletter.