Getting Comfortable With CSS Selectors (Part 2) pseudo-classes and pseudo-elements in CSS
Tags: css, tutorial, css3, webdev
Published: 2021-06-14 07:07:34

Hello everyone 👋‍, Welcome back to my series, [Getting Comfortable With CSS Selectors](https://vickyikechukwu.hashnode.dev/series/css-selectors),
if this is the first post in the series you are reading, I recommend checking out my previous article [Getting Comfortable With CSS Selectors (Part 1)](https://vickyikechukwu.hashnode.dev/getting-comfortable-with-css-selectors-part-1) to follow up in the in series 😉. 


in this article, we are going to continue from where we left off in the first part of the series, where we talked about some of the selectors we have in CSS. we will be looking at the `Pseudo-Classes` and `Pseudo-Elements` CSS selectors. sounds cool right? let's get into it 👇.

<h1 style="color: rebeccapurple;">Pseudo-classes</h1>

<blockquote>
CSS pseudo-classes are not exactly selectors on their own, they are keywords added to a CSS selector and let developers specify a special state of the selected element(s).
</blockquote>

> All Pseudo-class selectors in CSS are preceded by a colon `:`.

## 1. X:hover

```css
/* Any button over which the user's pointer is hovering */
a:hover {
  color: pink;
  text-decoration: blue;
}
```
One of the most commonly used pseudo-class the `:hover` `pseudo-class`, which is used to style element(s) in the hover state `(when the user hovers our them with a pointing device, usually a mouse)`. 

so in the example, we would give every link a color of pink when it is been hovered on. Want to apply specific styling when a user hovers over an element? This will get the job done! 👍.

## 2. X:focus
```css
 /* Selects any <input> with the field class when focused */ 
input.field:focus {
  border: 2px solid blue;
}
```

The `:focus` CSS `pseudo-class` represents an element (usually a form input) that has received focus (accepts keyboard or mouse events, or other forms of input).

{% codepen https://codepen.io/Vickyfloxy/pen/ExZeBpY %}

in the codepen the `:focus` `pseudo-class` is used to give input with the `red-class` `class` a red background and a blue background to the input with the `blue-class` `class` whenever they are focused on.

## 3 X:nth-of-type(n)

```css
/* Selects every second <p> element among any group of siblings */
div p:nth-of-type(2n) {
  color: lime;
}
```

The `:nth-of-type()` CSS `pseudo-class` selects elements(selectors) of a given type based on their position/location among a group of siblings.

say we have a `ul` and we want to style every `li`  whose numeric position in the list is even, no need to give them a special `class`, we could do that with the `:nth-of-type()` `pseudo-class` selector!

{% codepen https://codepen.io/Vickyfloxy/pen/XWpPLxv %}

<br/>
What about those whose numeric position in the list is odd, we got it covered

{% codepen https://codepen.io/Vickyfloxy/pen/KKaxjrr %}

<br/>

## 4. X:first-of-type
The `:first-of-type` `pseudo-class` Same as `:nth-of-type(1)`. Represents an element that is the first sibling of its type in the list of children of its parent element.
So if I wanted the first `li` to have a different style from its siblings, I could easily do that using the `:first-of-type` pseudo-class

{% codepen https://codepen.io/Vickyfloxy/pen/wvgELYm %}

## 5. X:visited
```css
/* Selects any <a> that has been visited */
a:visited {
  color: purple;
}
```
In some websites, it's common to apply some special styles to links that the user has visited so that when they come back to the page, they can know the external links they have visited already.
This can be done with `:visited` CSS `pseudo-class` as its styles only apply to links that have been visited by the user. 


<h1 style="color: rebeccapurple;">Pseudo-elements</h1>

We've got another interesting group called `pseudo-elements`
CSS `pseudo-elements` are keywords added to a selector that lets you style a particular part of the selected element(s).

I know, i know, it seems similar to CSS `pseudo-classes` right 🤔. Well there are two main differences between them

1. > `pseudo-elements` are preceded with two colons `::` instead of one, although these days modern browsers are more forgiving and support both single `:` and double `::` colons for the `pseudo-elements`. But it is a best practice to use two colons `::` 😏

2. > `pseudo-classes` are all about state, when we speak of state, I mean things like a visited link, a focused input field, an image that is being hovered upon, etc. While `pseudo-elements` are used to style sections or a particular part of of an element, things like the first letter in a word, the first line, etc.

## 6. X::first-letter (:first-letter)

The `::first-letter` represents the first letter on the first line of a block-level element, as long it is not coming after an image or a table.

```css
selector::first-letter {
  property: value;
}
```

{% codepen https://codepen.io/Vickyfloxy/pen/XWpPvjm %}

as you can we use the `::first-letter` pseudo-element to make the first letter of every `<p>` 300% and pink 😁.

## 7. X::selection (:selection)

```css
selector::selection {
  property: value;
}
```
The `::selection` `pseudo-element` is used to select and style the portion of a document that has been highlighted by the user. This is a really fun pseudo-element selector.

So if we wanted to overwrite the default styles of the browser that is applied text when they are selected/highlighted in our websites and apply our own custom styles, we can easily do that with the `::selection` `pseudo-element`. 

## 8. X::before (:before) And X::after (:after)

The `::before` and `::after` `pseudo-elements` are used to generate styleable content around the selected element's actual content, with the [CSS content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property.

we select the selector and after it, we give the `content` property a value, and whatever we specify in the value will be added before or after the selector in the Html.

<blockquote>
   `X::before (:before):` Represents a styleable child pseudo-element immediately before the originating element's actual content.
</blockquote>   


<blockquote>
   `X::after (:after):` Represents a styleable child pseudo-element immediately after the originating element's actual content.
</blockquote>  

By default the `::before` and `::after` `pseudo-elements` create an inline element, that can be styled and modified like any other element in the DOM. this gives us control to create cool interesting effects.

> 🚨 Note the `::before` and `::after` `pseudo-element` selectors should only be used to add cosmetic and stylistic content on our page. True content that is actually important for the page should be added to your page's markup.

Here is an example of using the `::before` and `::after` `pseudo-element`s i found on Codepen.

{% codepen https://codepen.io/giana/pen/yYBpVY %}

## Conclusion
Alright coder This brings us to the end of the series,  we've covered quite a bit about CSS selectors In this series! 🎉🎉🥂.

 for a more comprehensive guide on CSS selectors check out some of these resources.

- [MDN guide](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) 
- [MDN Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
- [MDN Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

And if you're up for it I have a [Little Exercise On Codepen](https://codepen.io/Vickyfloxy/pen/LYxgYzE) 😏 For you to test out your knowledge of what we have covered in this series. So I will like you to style the Html using the commented instructions in the CSS panel. Here is the [Codepen Solution](https://codepen.io/Vickyfloxy/pen/XWpxWeQ) in case you get stuck 🙂.  

So what are you waiting for, take this knowledge out there and go write some top-notch CSS styles that will impress your friends 💃💃.

<a href="https://www.buymeacoffee.com/molipa" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 188px !important;" ></a>

**Thanks so much for reading! ❤ And keep on coding! 👨‍💻.**

Share and Like it with your friends and feel free to follow me on [Twitter](https://twitter.com/VectorIkechukwu) so you won't miss my latest articles again.