Selecting Element states with CSS pseudo-class selector
Tags: css, html, webdev, beginners
Published: 2022-10-23 14:21:01

## Introduction
Hey there,  :wave:

In this article, we will discuss Pseudo-classes, which are a type of CSS Pseudo selectors. We will start by defining pseudo-classes, listing examples, and building a very simple tooltip hover.

Let's dive right in :rocket:


### Pseudo-Classes (`:`)
Pseudo-classes act like classes but they are not actual classes. That is the browser might treat them like classes, but they aren't actual classes.

They are used to select elements **only** when they are in a particular state.

For example, they can be used to:
- Style an element when it is active
- Style an element when it gets focus
- Style visited and unvisited links differently


The syntax for Pseudo-class selectors is:

```
selector:pseudo-selector{
   property: value;
}
```

Pseudo-classes cannot work independently, they have to be combined with other selectors using a colon `:`.

A popular example is the `:hover` which styles elements when the mouse "hovers" over them.

```
h1:hover{
    background-color: gray;
    border-left: 2px solid green;
}
```

In the example used above:
- The original element is first selected with (`h1`)
- Then the pseudo-class `:hover` is added to specify the required state.
> Note that the colon and the pseudo-class must be written together with no space in between.

The original element only contains the default styling, which is overridden by the pseudo-selector when it is in the specified state. That is an element styled with the `:hover` will remain normal until the mouse is over it.

> Unlike other selectors Pseudo-class names are not case sensitive, that is whether you write `:Hover` or `:hover` the browser will still read it the same way


### Examples
There are a lot of pseudo-classes, luckily you don't have to memorize them as most IDEs like VScode provide autocomplete for pseudo-classes.

Pseudo-classes can be general or element specific, that is some pseudo-classes can be used on all elements while others can only work on certain elements.


Examples of pseudo-classes include:
- `:link`: this is used to select **links** on the page that has not been visited.
- `:visited` is used to select **links** on the page that has already been visited.
- `:active` is used to select the **link** that is currently active.
> Note: when styling `a:active` must come after `a:link` and `a:visited` in order to be effective!
- `:focus` is used to select the **input** element that is currently being filled.
- `:optional` this is used to select **input** elements that are optional.
- `:empty` is used to select empty elements.
- `:root` is used to select the document's root element.

Visit [w3schools](https://www.w3schools.com/css/css_pseudo_classes.asp) for a complete list of pseudo-classes and examples.


### How to use pseudo-classes to make a simple tooltip-hover
An example of a tooltip hover is when you hover over an element, and a tooltip is displayed to show you more about the component. 

Don't worry if you are a total beginner, I am just showing an example of how pseudo-classes can be used on a webpage.

Steps to making a simple tooltip hove:
1. Write the Html:
    ```
    <h3 class="element">
        Hover over me to see "more".
        <span class="tooltip">MORE, now you have seen "more"</span>
    </h3>
    ```

    Here we defined 2 elements an `h3` as the parent, and a `span` as the child(inside the parent element).

    The `h3` element is given a class of "element", while the `span` is given a class of "tooltip".

2. Set the visibility/display of the `span` to none:
    ```
    .tooltip{
        display: none;

        background-color: #128;
        color: #fffd;
        padding: 10px;
        border-radius: 10px;
    }
    ```
    We don't want the span element to be visible normally, so we hide it by setting the display to none.

    I also added extra styling to make the span element look better. (optional)

3. Add the hover Pseudo-class to the `h3`(parent element):
    ```
    .element:hover
    ```
    this selects the element only when it is in the hover state, that is when the mouse is over it.

    But what we want to change is not the parent element but rather, the child element, we want to change the visibility/display back to block(the default display).

4. Change the display of the `span` element:
    ```
    .element:hover .tooltip{
        display: block;
    }
    ```

    We use the [descendant selector]() to connect the 2 elements so that when the mouse is over the parent element the display of the tooltip changes to block.

Result:
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWXgbOw" data-user="teejay128" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/teejay128/pen/MWXgbOw">
  Untitled</a> by Joseph Taiwo (<a href="https://codepen.io/teejay128">@teejay128</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Conclusion
I hope you now know what pseudo-classes are and how to use them on your website.

Pseudo-classes are important because they make your page more responsive, as some contents of the website change based on user actions.

> Note: Pseudo-classes are not to be confused with pseudo-elements which only select certain portions of the element.

If you liked this article don't forget to leave a like and follow for more content.
### Thank you for reading (^_^)