---
title: "How to use CSS Pseudo classes with examples"
date: "2020-12-06"
slug: "how-to-use-css-pseudo-classes-with-examples"
author: "Dany Paredes"
canonical: "https://danywalls.com/how-to-use-css-pseudo-classes-with-examples"
description: "I continue fixing my CSS weakness, and today is time for the Pseudo-classes. The Pseudo-classes help us to define a particular state of an element. The pseudo-class are determined using : maybe you are used before with links with something like a:ho..."
---
I continue fixing my CSS weakness, and today is time for the Pseudo-classes.
The Pseudo-classes help us to define a particular state of an element. The pseudo-class are determined using `:` maybe you are used before with links with something like `a:hover`.
I will show how to use and solve the common CSS problem with Pseudo class or feel accessible to [read](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) MDN examples.
## How to use Pseudo-classes
The best way to learn is doing. Then I perform the following tasks using pseudo-classes on our markup.
- The first box will have a border.
- I want to capitalize the first letter of every box.
- The mouse pass over the first box, then increment size.
- If the box is not the first on mouseover, decrement the opacity.
```html
```
[Link](https://jsfiddle.net/danywalls4/9apk3r8n/68/)
## The First box will have a border.
The first point is easy. Using the pseudo-class :first-of-type helps us to get the first element that fit with our selector.
```css
div.box:first-of-type {
border: 5px solid green;
}
```
[Link](https://jsfiddle.net/danywalls4/9apk3r8n/70/)
## Capitalize the first letter of p
If you read my post about [css combinator](https://dev.to/danywalls/css-combinators-with-examples-3f58), using it pseudo-class is an easy task nested with pseudo-class `:first-letter`.
```css
div.box > p:first-letter {
text-transform: uppercase;
}
```
[Link](https://jsfiddle.net/danywalls4/9apk3r8n/75/)
## Mouse passes over the first box, then increment size.
We already use pseudo-class to get the first box, using the pseudo-class `:first-of-type` then nest with `:hover`.
```css
div.box:first-of-type:hover {
width:200px;
height: 200px;
}
```
[Link](https://jsfiddle.net/danywalls4/9apk3r8n/77/)
## If the box is not the first on mouse over decrement the opacity.
Another unique pseudo-class is `:not`. It helps to use a negative selector. We can mix `:not` with `:first-of-type` and `:hover`.
```css
div.box:not(:first-of-type):hover{
opacity:0.5
}
```
[Link](https://jsfiddle.net/danywalls4/9apk3r8n/83/)
We did all tasks using pseudo-class. It helps us to create great selectors and fix everyday CSS tasks. The MDN has excellent example documentation about how to use it.
# The Real use case menu
The actual case is to create a menu with three user cases.
- By default, hide child options
- On hover show the menu and mouse out hiding
- The selected option has a different background.
- Menu without items display a strike line.
The markup
```html
```
[Link](https://jsfiddle.net/danywalls4/67vuyoqc/72/)
## By default, hide child options
We hide the options for using pseudo-class on hover to show again and simulate the menu's behavior.
```css
.child-option {
display: none;
background-color: black;
}
```
[Link](https://jsfiddle.net/danywalls4/67vuyoqc/74/)
## On hover show the menu and mouse out hiding
The pseudo-class `:hover` allow me to select the child option and switch back to visible, then the fundamental behavior of hiding and show is working.
```css
.option:hover .child-option {
display: flex;
flex-direction: column;
}
```
[Link](https://jsfiddle.net/danywalls4/67vuyoqc/75/)
## The selected option has a different background.
Again the hover and the CSS combination help us, using `>` get only child span from an option without selecting the `span`.
The selector for the child-option div we use `>` combinator and nested with the pseudo-class `hover`. The selector looks like `.option > span:hover`. The child options use `.child-option span:hover` to set the background hover for his span.
```html
.option > span:hover {
background-color: blue;
}
.child-option span:hover {
background-color: darkolivegreen;
}
```
[Link](https://jsfiddle.net/danywalls4/67vuyoqc/78/)
## Menu without items display a strike line.
The `only-child` pseudo-class helps us detect it is the only element that matches the selector. The `div.option` validates the span as the only child and sets the style.
```html
div.option span:only-child {
text-decoration: line-through;
}
```
[Link](https://jsfiddle.net/danywalls4/67vuyoqc/79/)
## Done!!!
That gives you a bit of a head-start with the Pseudo class.
If you enjoyed this post, please share it.