CSS Selector

Css Diner

Select what you want.

1. 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.

   Examples

   p + .intro selects every element with class=”intro” that directly follows a p
   div + a selects every a element that directly follows a

2. 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.

   Examples

   A ~ B selects all B that follow a A

3. 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.

   Examples

   A > B selects all B that are a direct children A

4. :nth-of-type[An+B]

   The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

   Examples

   span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance.

5. :empty

   Selects elements that don’t have any other elements inside of them.

   Examples

   div:empty selects all empty div elements.

6. :not(X)

   You can use this to select all elements that do not match selector “X”.

   Examples

   :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”.

7. [attribute*=”value”]

   A useful selector if you can identify a common pattern in things like class, href or src attributes.

   Examples

   img[src*="/thumbnails/"] selects all image elements that show images from the "thumbnails" folder.

   [class*="heading"] selects all elements with “heading” in their class, like class="main-heading" and class="sub-heading".