CSS Pseudo Selectors
Tags: css, beginners, codenewbie, html
Published: 2022-06-02 10:17:27

## **What are Pseudo-classes?**
A pseudo-class also known as Pseudo-selector is used to define a special state of an element.

For _example_, it can be used to:

- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus

![Pseudo classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrlyv4w79nodofobalx3.png)

## **Anchor Pseudo-classes**
Links can be displayed in different ways:

```css
/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}
```

## Pseudo-classes and HTML Classes
Pseudo-classes can be combined with HTML classes like `:hover` pseudo selector.
**Ex.**
```css
div:hover {
  background-color: blue;
}
```

### Hover on <div>

An example of using the :hover pseudo-class on a <div> element is shown above👆. On Hover the div's background color will change to blue.

## The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

**Ex.**
```css
p:first-child {
  color: blue;
}
```

In above Example, the selector matches any <p> element that is the first child of any element and it will turn it into blue color.

## The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for <q> elements with lang="no".

**Ex.**

```html
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>First text <q lang="no">
A quote in a paragraph
</q> Last text.</p>

</body>
</html>
```
Output ->

![Lang output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74lzhi1knim5mji3zyoa.png)

## ::before and ::after Pseudo-Selector
### ::before
The ::before selector inserts something before the content of each selected element(s).
_Syntax:_
```
::before {
  css declarations;
}
```
**Ex.**
```html
<!DOCTYPE html>
<html>
<head>
<style>
p::before { 
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>

<h1>Demo of the ::before selector</h1>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

```

> Remember to put a **content** property bcoz it's important!

Output ->

![::before Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2igx0nl1tx6cw5w8ub79.png)
### ::after
The ::after selector inserts something after the content of each selected element(s).
_Syntax:_
```
::after {
  css declarations;
}
```
**Ex.**
```html
<!DOCTYPE html>
<html>
<head>
<style>
p::after { 
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
</style>
</head>
<body>

<h1>Demo of the ::after selector</h1>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

```
Output ->

![::after Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myneszb7v5so4e8d6pi0.png)
## Other CSS Pseudo-Classes:

![Other Pseudo Selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqp1njv0amvq55pnygzm.png)

Did you find this Article helpful?
Give it a Heart and comment your thoughts!

_References:_
[w3schools CSS Pseudo-Classes](https://www.w3schools.com/css/css_pseudo_classes.asp)