CSS Selectors
I put together a guide for some super important and yet confusing CSS-Selectors. The list should help you clear the confusion between many of them, or simply use this guide as a 5-minutes review book to prep yourself before that interview.
Descendant Selector
A B
/* selects any B elements that are inside of the element A */
Comma Combinator
A, B
/* selects all A and B elements */
Universal Selector
*
/* selects all elements */
Adjacent Sibling Selector
A + B
/* This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth. */
/* div + a selects every a element that directly follows a div */
General Sibling Selector
A ~ B
/* You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one. */
/* A ~ B selects all B that follow a A */
General vs Adjacent Sibling Selector: With the general sibling combinator, one or potentially multiple elements will be styled. With the adjacent sibling combinator, only one element will be styled.
Child Selector
A > B
/* A > B selects all B that are a direct children A */
First Child Pseudo-selector
:first-child
/* p:first-child selects all first child p elements. */
Only Child Pseudo-selector
:only-child
/* span:only-child selects the span elements that are the only child of some other element. */
Last Child Pseudo-selector
:last-child
/* span:last-child selects all last-child span elements. */
Nth Child Pseudo-selector
:nth-child(A)
/* :nth-child(8) selects every element that is the 8th child of another element. */
:nth-child(odd)
/* :nth-child(odd) selects every odd element */
:nth-child(even)
/* :nth-child(even) selects every even element */
Nth Last Child Selector
/* Selects the children from the bottom of the parent. This is like nth-child, but counting from the back! */
:nth-last-child(A)
/* :nth-last-child(2) selects all second-to-last child elements. */
First of Type Selector
:first-of-type
/* span:first-of-type selects the first span in any element. */
Nth of Type Selector
/* Selects a specific element based on its type and order in another element - or even or odd instances of that element. */
:nth-of-type(A)
/* div:nth-of-type(2) selects the second instance of a div. */
Nth-of-type Selector with Formula
/* The nth-of-type formula selects every nth element, starting the count at a specific instance of that element. */
:nth-of-type(An+B)
/* span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance. */
Only of Type Selector
/* Selects the only element of its type within another element. */
:only-of-type
/* p span:only-of-type selects a span within any p if it is the only span in there. */
Last of Type Selector
/* Select the last element of a specific type */
:last-of-type
/* div:last-of-type selects the last div in every element. */
Empty Selector
/* Select elements that don't have children */
:empty
Negation Pseudo-class
/* Select all elements that don't match the negation selector */
:not(X)
/* :not(.someClass) selects all elements that do not have class="someClass" */
Top comments (1)
Good one! A need for robust all-inclusive guide was mainly my inspiration in coming up with this document. I, even at this date, sometimes struggle with many of these!