CSS Pseudo-classes
Tags: css, webdev
Published: 2023-04-18 23:34:06

by [Daniel Michael](https://blog.openreplay.com/authors/daniel-michael)


A keyword added to a selector in CSS that specifies a particular state of a marked element is known as a pseudo-class. CSS pseudo-classes allow you to specify properties and apply styles to selectors based on their state and external factors.

In keeping with the definition,  CSS Pseudo-classes are referred to as classes because the rule applies to elements that share the same state. 
As an illustration, the pseudo-class `:lang()` will only choose an element based on the language of its content.

Notably, Pseudo elements can be used to style a certain portion of an element, as opposed to Pseudo-classes.

We will learn about CSS pseudo-classes in this article, including some of the most popular ones.

## Syntax

A colon <kbd>:</kbd> and the name of a pseudo-class are appended to a tag to declare a CSS pseudo-class (It is also necessary to note that CSS Pseudo class names are not case-sensitive.). 

HTML content associated with a tag will automatically receive the pseudo-class.

Here is a brief explanation of what pseudo-class syntax looks like:
```
tag: pseudo-class {
Property: value;
}
```
## Frequently used Pseudo-classes

We will be looking at some commonly used pseudo-classes:

* `:link `
* `:visited`
* `:hover`
* `:active` 
* `:focus`

Create a new file, `style.css,` and paste the code block below:
```css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

a {
  color: black;
  text-decoration: none;
  font-size: 50px;
  font-weight: 700;
}
```
Create an HTML file and paste the code block below:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Demo for pseudo classes</title>
  </head>

  <body>
    <ul>
      <li><a href="https://wordpress.org" target="_blank">Wordpress</a></li>
      <li><a href="https://adobe.com" target="_blank">Adobe</a></li>
      <li><a href="https://mozilla.org" target="_blank">Mozilla</a></li>
      li><a href="https://feedburner.org" target="_blank">Feedburner</a></li>
      <li><a href="https://slideshare.net" target="_blank">Slideshare</a></li>
      <li><a href="https://wikimedia.org" target="_blank">Wikimedia</a></li>
    </ul>
  </body>
</html>
```

The above code block will be used to show the usage of the different pseudo-classes

## :link
The `:link` pseudo-class is used to style and pick out links on a website that have not yet been clicked by the user. It matches every `:unvisited `anchor`<a>` element that has a `<href>`attribute.  

It is important to understand that an element can be both `:active` and`:visited` in order for the `:link` pseudo-class to function.

The style set by the `:link`pseudo-class can be overridden by pseudo-classes like`:active, :visited`,`:hover`

There is a `:link` rule that must be followed before all other link-related rules to style links properly, and it must be specified in the following sequence:
```
:link ➔ :visited ➔ :hover ➔ :active 
```
It shall be referred to as the `LVHA order` throughout this article.

### Syntax

```css
tag:link { property: value }
```

### Example
```css
a:link {
  color: black;
}
```

### Output
![Link](https://blog.openreplay.com/images/css-pseudo-classes/images/sSB27Bf.png)






## :visited
A `:link` that has been visited is described by the `: visited` pseudo-class. 
The `: visited` pseudo-class can only be applied to anchor `<a>` elements that include the `<href>` attribute, just like the `: link` pseudo-class.

The `:visited` pseudo-class can assist users in distinguishing between `:visited` and `:unvisited` links.

The `:visited` pseudo-class and specific scripting can be used to retrieve a user's web browsing history. 

As a result, there are restrictions on the styles that can be set for a `:visited` link. 

Browsers, for instance, won't permit a page's background picture to be changed. By blocking these scripts from accessing and also obtaining links that have been visited from the web page, these restrictions aid in protecting users' privacy.

Nevertheless, the following styles are permitted, and they are:
* `:color`
* `:background-color`
* `:outline color`
* `:column rule color`

All other styles are inherited from the':link'pseudo-class.

Overall, the` :visited` pseudo-class is a useful tool for web designers to enhance the usability of their websites, but it should be used with care to respect user privacy and security.

### Syntax
```css
tag:visited { property: value }
```


### Example
```css
a:visited {
  color: red;
}
```
### Output
As shown below, each link that has been `:visited` has a color shift from black, which represents an `:unvisited` link, to red, which denotes the link has been clicked.

![Visited](https://blog.openreplay.com/images/css-pseudo-classes/images/8vaLpQM.gif)






<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>





## :hover

When an element is hovered over by the user, the`:hover` pseudo-class adds additional effects and matches with it. 

The user frequently gets visual cues when they hover over an element, and if necessary, they have the choice to activate it.

The `: hover` pseudo-class becomes effective after the `: link` and `:visited` pseudo-classes are applied before it, thereby ensuring complete compliance with the `LVHA order`.

On touchscreens, the `: hover` pseudo-class might provide difficulties. 
Depending on the browser, it may never match, just match briefly after the user touches the element, or match even after the user stops touching until the user touches another element.

The `:hover` is the most used pseudo-class in CSS.

### Syntax

```css
tag:hover { property: value }
```
### Example

```css
  a:hover {
  color: green;
  text-decoration: underline;
}
```
### Output 
![Hover](https://blog.openreplay.com/images/css-pseudo-classes/images/x1BmBGz.gif)








## :active
The element is displayed as being in an active state using the `: active` pseudo-class. This pseudo-class is most frequently linked to the `<a>`element and `<button>`. The elements that are contained within an activated state are another common target of the pseudo-class.

When a user clicks an element with the mouse, the action is referred to as "activating" in CSS. It is an ephemeral, transitory state. Once the user stops clicking on an element, the element will no longer be activated.

### Syntax
```css
tag:active{ property: value }
```
### Example
 
```css
a:active {
  color: goldenrod;
}
```

### Output
![Active](https://blog.openreplay.com/images/css-pseudo-classes/images/IIkIVI7.gif)





## :focus
An element that has been the subject of focus is described by the `: focus` pseudo-class. It is used to style an element that is currently being selected with the mouse or activated by the keyboard.

When an element is selected and available for text input, it is said to be in "focus" (like when the cursor is blinking). Keyboard users can tab into them while using the mouse to focus on them.

### Syntax
```css
tag:focus{ property: value}
```
### Example
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style6.css" />
    <title>Demo for :focus</title>
  </head>
  <body>
    <div class="wrapper">
      <button class="button">Use your tab key to focus this button</button>
    </div>
  </body>
</html>
```


```css
.button {
  font-size: 40px;
}

.button:focus {
  outline: 2px dashed black;
  outline-offset: 2px;
  background-color: gray;
  font-size: 60px;
  font-weight: 600;
}
 ```

### Output
![Focus](https://blog.openreplay.com/images/css-pseudo-classes/images/s6Iom8j.gif)








## Conclusion
In conclusion, CSS pseudo-classes are powerful tools for styling web pages, allowing developers to target specific elements based on their state or position in the document tree.

They can be used to add special effects, improve accessibility, and create interactive user experiences. It is important to understand how to use them effectively in order to create efficient and maintainable stylesheets.

Additionally, some `pseudo-classes` may not be supported by older browsers, so it is important to test your stylesheets thoroughly across multiple platforms and devices.