DEV Community

Igor Irianto
Igor Irianto

Posted on • Edited on • Originally published at irian.to

CSS Selectors Cheat Sheet

#css #codenewbie #frontend #cheatsheet

Knowing how to use CSS selectors effectively is useful for Frontend developers. I created a cheatsheet of commonly-used selectors.

Why another CSS cheatsheet?

Although other CSS selector cheatsheets exist (see resources), I find them either lacking grouping/organization, missing examples, or have too much information.

That's why I group this cheatsheet into 8 different types. At the start of each group you'll find HTML snippet. Use that HTML snippet with that group (and play around with it!). The list is not comprehensive and I intend it to be. The list below should cover most development needs.

Table of Contents

Basic selectors

They select element/id/class. They are also used most often and easiest to remember.

<div id="app">
  <div class="container">
    <p class="hello">Hello</p>
    <p class="hola">Hola</p>
  </div>
  <div class="other">
    I am left behind...
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Element selector: Element. It selects any given element. 
p { color: blue; }
div { color: magenta; }
Enter fullscreen mode Exit fullscreen mode
  • Class selector: .class. It selects all element containing given class name. 
.hello {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • ID selector: #id. It selects the element containing given HTML ID. 
#app {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Universal selector: *. It selects all elements. 
* {
  color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Descendant selectors

These are selectors for choosing descendants of any element.

<div class="container">
  <div class="paragraph-container">
    <p id="hola-id" class="hola-class">Hola world</p>
    <p class="hello-class">Hello world</p>
    <p class="hello-class again-class">Hello again world</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Any descendant selector: A B. Selects any elements B that are descendants of A. The descendant can be nested really deep. 
.container .hello-class {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

We can combine this with * to get:

.paragraph-container * {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

This selects everything inside .paragraph-container

  • Child selector: A > B. Unlike any descendant selector, this one only selects direct descendant/ child. 
.paragraph-container > .hello-class {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

While below won't work because .hello-class in this scenario is not direct descendant:

.container > .hello-class {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Multiple Selector 

<div class="container">
  <div class="paragraph-container">
    <p id="hola-id" class="hola-class">Hola world</p>
    <p class="hello-class">Hello world</p>
    <p class="hello-class again-class">Hello again world</p>
  </div>
  <p class="outside-class">I'm outside</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Multiple selectors allow us to select multiple unrelated elements together.

  • Multiple selectors: A, B, C, .... To select multiple elements/classes/ids, connect them with ,: 
.outside-class, .again-class, .hola-class {
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode

Combination selector

Combination selector allows you to choose very specific element using multiple references. A popular use-case is button highlight effect when hovered/ clicked by giving them an .active class.

<div class="container">
  <div class="paragraph-container">
    <p id="hola-id" class="hola-class">Hola world</p>
    <p class="hello-class">Hello world</p>
    <p class="hello-class active">Hello again world</p>
  </div>
  <p class="outside-class">I'm outside</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Combination selector: AB. This selects element containing BOTH A and B. The syntax looks like descendant selector, except this does not have space. 
p.active {
  color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

We can combine anything, not just element and class:

p#hola-id {
  color: blue;
}
.hello-class.active {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Sibling selectors

These selectors target their siblings.

<div class="container">
  <div class="paragraph-container">
    <p id="hola-id" class="hola-class">Hola world</p>
    <p class="hello-class">Hello world</p>
    <p class="hello-class again-class">Hello again world</p>
  </div>
  <p class="outside-class">I'm outside</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Adjacent sibling selector (strict): A + B. Targets one sibling element placed immediately after that element. sibling1 + sibling2 
#hola-id + .hello-class {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Note that CSS below won't work because .again-class, although it is #hola-id's sibling, is 2 elements away.

#hola-id + .again-class {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode
  • Any adjacent sibling selector (relaxed): A ~ B. Like adjacent sibling selector, but selects ANY sibling selector(s) after. The syntax ~ personally reminds me of shrugging 🤷‍♂️🤷‍♀️ - hence ~ is more relaxed than +. 
#hola-id ~ .hello-class {
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode

Note it doesn't work backwards (B ~ A is not the same as A ~ B):

.again-class ~ #hola-id {
  color: red
}
Enter fullscreen mode Exit fullscreen mode

Pseudo Selectors 

<div class="container">
  <div class="paragraph-container">
    <p id="hola-id" class="hola-class">Hola world</p>
    <p class="hello-class">Hello world</p>
    <p class="hello-class again-class">Hello again world</p>
  </div>

  <p class="outside-class">I'm outside</p>

  <ul id="list-id" class="list-class">
    <li class="list-item-class">First</li>
    <li class="list-item-class">Second</li>
    <li class="list-item-class">Third</li>
    <li class="list-item-class">Fourth</li>
    <li class="list-item-class">Fifth</li>
  </ul>

  <div class="single-paragraph-container">
    <p>I'm the only child of this span</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • First child selector: A:first-child. It selects each target that is the first child of its parent. The definition is a bit confusing at first. The way I think of it, the target (A) must itself be a first child of a parent.

note the phrase: the first child of its parent.

li:first-child {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

The above one works because li has a parent: ul. li is also ul's first child.

What would happen if you target ul?

ul:first-child {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Nothing happens. This is because although ul has a parent (div with class container), ul is not a first child (it is a 3rd child).

The code below will work because .paragraph-container is .container's first child.

.paragraph-container:first-child {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Last child selector: A:last-child. Works like first-child, except instead of first, our target must be a last child. 
li:last-child {
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode
  • Only child selector: A:only-child. Selects all A that is the only child of its parent. Similar to first and last child selectors. Except the target must not have any siblings. 
p:only-child {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Note although we have several p elements, only the last one applies because the other p elements are not its parent's only child. They have siblings.

  • Nth child selector: A:nth-child(n). It selects each target that is the nth child of its parent. 
li:nth-child(2) {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Let's try with p now:

p:nth-child(2) {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Can you see why two p elements changed colors?

  • Last nth child selector: A:nth-last-child(n). It is similar to the nth child selector, except it counts from last. 
li:nth-last-child(2) {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Not selector: A:not(B). Selects all A element that is not B. 
p:not(.outside-class) {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode
  • First type selector: A:first-of-type. It selects the first element of its type among its sibling elements.

This one sounds similar to :first-child when I first hear about it. To feel how it is different, let's play around:

li:first-of-type {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Ok, that's not a good example because it shows same result as li:first-child 😅. Let's do another example:

p:first-of-type {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

This one is better. Compare that with p:first-child. You'll notice that the middle p turns red using first-of-type and it doesn't using first-child. This is because the middle p is the first p element type among its siblings 💡.

  • Last type selector: A:last-of-type. Just like the above, but opposite. 
li:last-of-type {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode
  • Nth type selector: A:nth-of-type(n). Just like the two above, but this selects nth element of that time. 
li:nth-of-type(2) {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Let's try different element:

p:nth-of-type(2) {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

If we changed it to p:nth-of-type(1), it behaves just like first-of-type. Also if we changed it to p:nth-of-type(4), nothing changes color - this is because there is no 4th p element among siblings.

  • Only type selector: A:only-of-type. Selects the element with ONLY that type (no siblings) 
p:only-of-type {
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode

Notice two p elements change color. This is because there are two p elements that have no sibling with the same type.

Pseudo-selectors (links and inputs)

Below are a list of more pseudo selectors. These are commonly associated with links (a) (although they may work with non-link elements).

<div id="app">
  <a class="cheesyLink" href="#">I like cheese</a>
  <a class="sweetLink" href="#">I like donut</a>
  <div class="burger">I like cheezburger</div>
  <div class="container">
    <form onsubmit="event.preventDefault()">
      <input class="myinput"type="text" />
      <input class="mysubmit" type="submit" />
    </form>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Hover selector: A:hover. Selects hovered element. Commonly used to highlight links. 
a:hover {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

It doesn't have to be a tag though. This selector works with anything.

.burger:hover {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Focus selector: A:focus. Selects a focused element. Usually works with input. 
input:focus {
  background: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Active selector: A:active. Selects an element that is in active state.

Note as you click it, the background changes.

.cheesyLink:active {
  background: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Link selector: A:link. It selects all links that have not been clicked yet 
a:link {
  background: blue;
}
Enter fullscreen mode Exit fullscreen mode

Attribute selectors

Attribute selector is useful for selecting HTML attributes.

  <div for="chocolate">Chocolate</div>
  <div for="peanut">Peanut</div>
  <div for="butter">Butter</div>
  <div>Jelly</div>
Enter fullscreen mode Exit fullscreen mode
  • Basic attribute selector: A[B]. Selects all elements A with attribute B. 
div[for] {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Specific attribute selector: A[B="C"]. Selects all element A with attribute B with value C 
div[for="chocolate"]{
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode
  • Specific attribute selector (starting): A[B^="C"]. Selects all element A with attribute B with C starting value. Note that ^ is Regex for starting string. 
div[for^="cho"] {
  color: magenta;
}
Enter fullscreen mode Exit fullscreen mode
  • Specific attribute elector (ending): A[B$="C"]. Selects all element A with attribute B with C ending value. Note that $ is Regex for ending string. 
div[for$="er"] {
  color: yellow;
}
Enter fullscreen mode Exit fullscreen mode
  • Specific attribute selector (wildcard): A[B*="C"]. Selects all element A with attribute B containing C value. Note that * is usually a wildcard in regex and globs. 
div[for*="ut"]{
  color: cyan;
}
Enter fullscreen mode Exit fullscreen mode

So there you have it folks! If you need more references, feel free to check out the resources below. If you think a different way I can make this cheatsheet more practical, feel free to comment below.

Resources:

Top comments (1)

Collapse
 
bigted99 profile image
Bigted99 •

This has been very helpful