Demystifying Basic CSS Selectors
Tags: webdev, css, beginners
Published: 2023-07-18 01:59:53

## Introduction

Have you ever struggled with the basic selectors in Cascading Style Sheets(CSS)? Here's a quick guide on how to use them. 

## What are selectors?
CSS selectors are patterns used to choose and style HTML elements. 

| Selector   | Symbol | 
|------------|----------|
| universal          | *| 
| id       |   # | 
| class      | .   | 
| type     |  _element_ |
| pseudo-class| : |
| pseudo-element| :: |

### Universal Selector
The universal selector is used to select and style all of the elements within an HTML document. It is represented with in CSS with an asterisk(*).

```
/* CSS */
* {
    background-color: blue;
}
```
### id Selector
On the other hand, the id selector will style all of the elements that have a given `id` attribute. It is represented with a hashtag(#).

```
/* CSS */
#test {
    background-color: blue;
}
```

```
<!-- HTML -->
<div id="test">
    This is a div with an id selector
</div>
```


![Id selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tq1bzcy9n9x3nibobvq.png)


In the above example, all elements with the `id = "test"` will be styled accordingly. 

### Class Selector
The class selector will style HTML elements based on their `class` attribute. It is represented with a period(.).


```
/* CSS */
.test {
    background-color: blue;
}
```

```
<!-- HTML -->
<div class="test">
    This is a div with a class selector
</div>
```


![Class selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4p57e9im11l7b6o05ht.png)




In the above example, all elements with a `class` attribute of _test_ will be styled according to the class selector named _test_.

### Type Selector
This selector works by styling all of the elements of a given name.

```
/* CSS */
p {
    background-color: blue;
}
```

```
<!-- HTML -->
<div >
    <p>Paragraph</p>
    <span>Span</span>
    <p>Paragraph</p>
    <span>Span</span>
</div>
```


![Type selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfazzayavmvuuq1i7p4j.png)


Following the above example, all paragraph(`<p>`) elements within the HTML document will be styled accordingly.


### Pseudo-Classes
These selectors allow for the selection of elements based on state information not contained in the document tree. This state information can be based on navigator history, status of content, the position of the mouse or the element's position in the DOM tree. Here is a comprehensive list of [CSS pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#alphabetical_index)

```
/* CSS */
button:hover {
    color: gray;
}
```



![Mouse hover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nogv3uoduik1ya1lmdu.png)

The above example shows how a button element will be stylised as gray whenever the user hovers with a mouse.

### Pseudo-Elements
Allow for the styling of specific parts of an HTML element

```
/* CSS */
p::first-letter {
    color: red;
}
```

```
<!-- HTML -->
<div >
    <p>Paragraph</p>
</div>
```
![Pseudo-element selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fxqod9j2r27q9ajn4bv.png)


This will style the first letter of a `<p>` element with the color red. Here is a comprehensive list of [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#list_of_pseudo-elements).

**NOTE:** If you are concerned with accessibility, caution should be used when adding content with pseudo-elements, for example, using the `::before` selector to add content before an element, as this content may not be available to screen readers. 

## Bonus
You might be wondering how to select an element that is a descendant of another element in the tree. This can be done using the descendant combinator, where an empty space, `" "`, is used to separate two selectors. Elements that match the second selector are chosen only if their ancestor matches the first selector. 

```
<!-- HTML -->
<div id="testId">
  <p>No combinator</p>
  <p class="testClass">Descendant combinator</p>
</div>
```

```
/* CSS */
#testId .testClass {
    color: green
  }
```
The result is shown below.

![Descendant combinator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0ryy5uu56nla0bk4030.png)

Only the second `<p>` element is stylised as green using a descendant combinator.

## Conclusion

I hope this quick guide helps to clarify any confusion you might have regarding basic CSS selectors. 

## References

1. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#basic_selectors)