CSS Selector Cheat Sheet: Top selectors for front-end development
Tags: css, webdev, tutorial, programming
Published: 2023-02-28 18:37:27

**CSS selectors** are used to locate HTML elements you want to style in your programs. Think of these like patterns or codewords that all you to specifically search for and modify particular aspects of your code. Using CSS selectors will speed up your front-end life and make it far easier to edit code quickly. 

Today, we'll show how to implement all the most useful **CSS selectors**, from basic to advanced pseudo-selectors.

Let's get started!
 
**In this article, we’ll talk about:**
* [What are CSS Selectors](#what)
* [Basic Selectors](#basic)
* [Combinator Selectors](#combinator)
* [Pseudo- Selectors](#pseudo)
* [Attribute Selectors](#attribute)
* [What to Learn Next](#next)

<br>
 
<a name="what"></a>

## What are CSS Selectors

![CSS Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovd9s3ckzn32tzs75888.png)

An external stylesheet is a separate file from your HTML document. To link the two, you will need to add a `<link>` to the head of your HTML document that references the CSS file you create.

This external stylesheet will contain individual CSS Rules -- blocks of CSS that contain a CSS Selector and a set of CSS properties called the declaration block. 

The CSS Selector dictates which HTML element to apply the properties to.


```css
body {  /* <-- this is the CSS Selector */
   text-align: center; /* <-- this is one CSS Property */
   margin: 0 auto;
}
```
 
Both the CSS Selector and the declaration block make up one CSS Rule. Next, we’ll take a look at some of the common ways to select HTML elements so you can style your web pages.

<br>
 
<a name="basic"></a>

## Basic Selectors
 
<br>
 
### Universal or ‘Wildcard’ selector

```css
* {  
   box-sizing: border-box;
}

```
 
**The universal selector**, indicated by the `*`, selects everything on the page. A common use of this selector is to indicate the box sizing on the page.
 
<br>
 
### Tag Selectors

```css
p {  
   font-size: 14px;
}
```

**Tag selectors** select HTML elements based on their tag. The example here shows that all `p` tags will have a font size of 14px.
 
<br>
 
### Class Selectors

```css
.none {  
   display: none;
}
```
 
**Class selectors** select HTML elements based on their class names. The class is selected by using a `. `symbol. The example here shows that all elements with the class name of `.none` will not be displayed.
 
<br>
 
### ID Selectors

```css
#container {  
   margin: 0 auto;
   padding: 0;
}
```
 
**ID selectors** select HTML elements based on their ID. They are selected using `#`.  The example here shows that the element `#container` will have a margin of `0 auto` and `0 padding`.

<br>
 
<a name="combinator"></a>

## Combinator Selectors

Combinator selectors join multiple basic selectors with a combinator to form more complex selection criteria. A combinator is a character that will instruct the compiler on how to select an HTML element. There are four different types:
 
<br>
 
### Descendent Selectors

```css
ul a {  
   text-decoration: none;
   color: black;
   cursor: pointer;
}
```
 
Sometimes we don’t want to style all of any particular class or tag, but only the ones inside another element. **Descendant selectors** use a space to select a particular descendant of another element.  In this example, we are selecting any tag that is inside an unordered list to change the `text-decoration`, `color`, and `cursor`.
 
<br>
 
### Child Combinator Selectors

```css
div > p {  
   font-size: 12px;
   color: pink;
}
```
 
There are times, we specifically want to select an immediate child of another element. **Child selectors** use a `>` to select a child of another element.  In this example, we are selecting any `p` tag that is a child of a `div` to change the font-size and color.

We can also use target a specific child element using the `first-child` or `last-child` selectors. 

```css
p:first-child {
   color: red;
}
```

<br>

```css

div p:last-child {

  color: red;

}
```
 
<br>
 
### Adjacent Sibling Selectors

```css
div + p {  
   font-size: 12px;
   color: pink;
}

```
 
We use the `+` to indicate we want an adjacent sibling element. An adjacent sibling has the same parent element as the first element and immediately comes after that first element.

The first element listed in the **adjacent sibling selector** tells the compiler what to look for. The second element indicates the item that we are actually selecting. 

Read this example as “Select all p tags that come immediately after `div` tags”.  In this example, we are selecting any `p` tag that has the same parent element as the `div` tag, where the `p` tag immediately comes after the `div`.  

 ```html
 <body>
     <div></div>
     <p></p> <!-- the CSS selector will select this element because a div tag comes immediately before it. 
-->
 </body>
```
 
<br>
 
### General Sibling Selector

```css
div ~ p {  
   font-size: 12px;
   color: pink;
}
```
 
You can use the **general sibling selector** to select all siblings of an element. In this example, we are selecting any `p` tag that is a sibling of a `div` to change the font size and color.

```html
 <body>
     <p></p> <!-- the CSS selector will select this element because a div tag is one of the siblings. -->
     <div></div>
     <p></p> <!-- the CSS selector will select this element because a div tag is one of the siblings. -->
 </body>
<br>
```


<a name="pseudo"></a>

## Pseudo-Selectors
 
<br>
 
### Pseudo-Class Selectors

```css
a:hover {  
   font-size: 12px;
   color: pink;
   font-weight: bold;
}
```
 
<br>

```css
div:nth-child(2) {  
   background-color: red;
   color: white;
   font-weight: normal;
}
```
 
There are times, we specifically want to style an element when the state of the element is visited, hovered over, active, in focus, etc. We can use **pseudo-class selectors** to style certain elements to be styled in a certain way based on behavior or placement. Use a colon `:`  after the element you want to style.
 
<br>
 
### Pseudo-Element Selectors

```css
div::selection{  
   font-size: 12px;
   background-color: pink;
}
 
h1::before{  
   content: 😎;
}
h1::after{  
   content: 😎;
}
```
 
**Pseudo-element selectors** are very similar to pseudo-class selectors in the way they are written. If we want the text that a user selects in a `div` to be a certain background color, we can style that using `div::selection`.

> Note the two colons. This was a change from previous versions of CSS. Modern CSS uses two colons to better differentiate between a pseudo-class and a pseudo-element.

The `::before` and `::after` pseudo-selectors have a content property. That content will be inserted before or after the specified element. In this example, a 😎 will be inserted before and after an `h1`.
 
<br>
 
### Attribute Selectors

```css
div[data-tab] {  
   display: none;
}
div[data-tab=“one”] {  
   display: block;
   background-color: ivory;
}
```
 
There are two types of **attribute selectors**:  one that specifies only if the element has the `named` attribute and one that specifies the named attribute and attribute value. This type of selector is particularly useful if you are using custom attributes in your HTML.

This example targets a `div` that has the custom attribute data tab and sets `display` to none by default. The next CSS rule is even more specific when we select the `data-tab` attribute that has the value of “one” to display it.

<br>
 
<a name="next"></a>

## What to learn next

That's all for our CSS selectors cheat sheet. Learning these short codes will make your front-end life much easier, as you can search your code like a pro. Be sure to keep this on hand for your next CSS project. 

If you want to continue learning about CSS selectors, here are some next topics to consider:

* `nth` type selectors, (`nth-last-child`, `nth-of-type`, etc.)

* Line selectors (`first-line`, `last-line`)

* Advanced selectors (`first-letter`, `interface-state`)

* CSS selector best practices

To help you learn these advanced topics, Educative has created the course **[The Complete Advanced Guide to CSS](https://www.educative.io/courses/the-complete-advanced-guide-to-css?eid=5082902844932096)**. This course teaches you helpful advanced techniques used by front-end developers every day, all with interactive examples. 

By the end, you'll have not only mastered selectors but other advanced CSS topics like CSS grid manipulation, custom properties, dynamic positioning, and more.
 
*Happy learning!*
 
### Continue reading about CSS and web development on Educative
* [Complete Guide to CSS Positions: element layout in CSS](https://www.educative.io/blog/complete-guide-css-positions?eid=5082902844932096)
* [CSS Interview Questions: Cheat Sheet for Front-end Interviews](https://www.educative.io/blog/css-interview-questions-cheat-sheet?eid=5082902844932096)
* [Revamp Your Front-End Skills: hands-on with HTML5 and CSS3](https://www.educative.io/blog/revamp-front-end-skills?eid=5082902844932096)

### Start a discussion
Why does web development interest you, and what do you hope to accomplish with it? Was this article helpful? Let us know in the comments below!