Select what you want.
- 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.
In the HTML markup for this level, elements that have the same indentation are siblings.
p + .introselects every element with class=”intro” that directly follows a p
div + aselects every a element that directly follows a
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 ~ Bselects all B that follow a A
A > B
You can select elements that are direct children of other elements.
A child element is any element that is nested directly in another element.
Elements that are nested deeper than that are called descendant elements.
A > Bselects all B that are a direct children A
The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.
span:nth-of-type(6n+2)selects every 6th instance of a span, starting from (and including) the second instance.
Selects elements that don’t have any other elements inside of them.
div:emptyselects all empty div elements.
You can use this to select all elements that do not match selector “X”.
:not(#fancy)selects all elements that do not have id=”fancy”.
div:not(:first-child)selects every div that is not a first child.
:not(.big, .medium)selects all elements that do not have class=”big” or class=”medium”.
A useful selector if you can identify a common pattern in things like class, href or src attributes.
img[src*="/thumbnails/"]selects all image elements that show images from the
[class*="heading"]selects all elements with “heading” in their class, like