A CSS selector is an aspect of CSS rules set that helps selects the elements we would like to apply specific styles to.
CSS Selectors enable us to focus on specific HTML components and apply different CSS styles to them.
For example let's say we want our entire page to appear with a grey background, the CSS style to effect that will be
```
body {
background: grey;
}
```
In the above line of code `body` is used to indicate that all contents nested in the body element should be given a background of `grey`.
The `CSS` selector in this context is `body` which is classified and referred as a type selector.
There are a number of CSS selectors available, here's a list of 4 common selectors with quick descriptions to get you going.
## Types Of CSS Selectors
#### 1. Type Selectors
Type selectors usually match the name of the elements they are targeting.
Here are examples of **Type Selectors**
```
body {
background: grey;
}
a {
color: white;
}
ul {
height: 300px;
}
```
The CSS selectors in the style above are `body`, `a`, and `ul`.
- `body` will affect the contents of `<body></body>` tag.
- `a` will affect the contents of the `<a></a>` tag.
- `ul` will affect the contents of the `<ul></ul>` tag.
#### 2. Class Selectors
Class selectors matches the value of a class attribute value assigned to any element.
The styles set for this class attribute value will be applied on the element on the class is assigned to.
Here's an example on how to use class selectors
**HTML**
```
<p class="warning">Danger</p>
```
**CSS**
```
.warning {
background: red;
color: white;
}
```
Because the `<p></p>` tag has been assigned a class attribute value `warning`, it's contents will appear on the page with a `red` background and text color set to white.
Class selectors are declared by adding a `.` before typing the class attribute value in the CSS stylesheet.
An instance can be found in the example above where the attribute was referred to as `.warning` instead of `warning`
#### 3. ID Selectors
ID selectors matches the value of a id attribute assigned to any element.
All styles set for the id value in the stylesheet will be applied on the contents of the tags containing a matching the id attribute value in the HTML (just like class selectors).
Here's an example
**HTML**
```
<p id="warning">Danger</p>
```
**CSS**
```
#warning {
background: red;
color: white;
}
```
Having a id value `warning` in any tag will make the content of the element appear with a `red` background and text-color set to `white`.
Note that class selectors and id selectors are quite similar in their use cases save for one distinction which is explained below.
Where class selectors are declared by using the prefix `.` id selectors make use of the `#` symbol.
In the example above we use `#warning` as the selector instead of using `.warning` which is a class selector or `warning` which is wrong syntax and won't work at all.
#### 4. Descendant Selectors
Unlike other selectors mentioned earlier in this post `descendant selectors` work differently.
The distinction that comes with using descendant selectors is that other selectors use one parameter to identify the target element, whereas in the case of descendant selectors it take two parameters to identify the target element.
Here's an example showing a descendant selector in use
**HTML**
```
<p>Let's ride on <span>to greatness</span></p>
```
**CSS**
```
p span {
color: blue;
}
```
The above CSS code will apply the set styles to all contents of any `<span></span>` tag nested within a `<p></p>` in the HTML.
Descendant selectors are not limited to element tags only, we can also use class and id attribute values in place of tags.
In future posts we will cover other types of CSS selectors.
Meanwhile, you can find additional information on CSS selectors by checking out Mozilla's [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors).
----
Thanks for checking out this post, should you have any thoughts or additional opinions on the different types of CSS selectors kindly share in the comment section.
hiveblocks