Head start with CSS Pseudo classes and examples
Tags: css, beginners, html
Published: 2020-12-06 17:48:52

I continue fixing my CSS weakness and today is time for the Pseudo classes.



The Pseudo classes help us to define a special state of an element, the pseudo class are defined using `:` maybe you are used before with links with something like  `a:hover`.


I will show how to use and how to solve the common CSS problem with Pseudo class or feel free 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 follow 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 first box then increment size.

- If the box is not the first on mouse over decrement the opacity.


```html
<main>
  <div class="sandbox">
    <div class="box">
      <p>python</p>
    </div>
    <div class="box">
      <p>angular</p>
    </div>
    <div class="box">
      <p>react</p>
    </div>
  </div>
</main>
```
{% jsfiddle https://jsfiddle.net/danywalls4/9apk3r8n/68/ result,html,css %}

## The First box will have a border.

The first point is easy, using the pseudo class :first-of-type help us to get the first element that fit with our selector.

```css
div.box:first-of-type {
	border: 5px solid green;
}
```
{% jsfiddle https://jsfiddle.net/danywalls4/9apk3r8n/70/ result,html,css %}

## Capitalize the first letter of p

If you read my post about [css combinator](https://dev.to/danywalls/css-combinators-with-examples-3f58), the using it and pseudo class is an easy task nested with pseudo class `:first-letter`.


```css
div.box > p:first-letter {
	text-transform: uppercase;
}
```
{% jsfiddle https://jsfiddle.net/danywalls4/9apk3r8n/75/ result,html,css %}

## Mouse pass over first box then increment size.

We already use pseudo class for 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;
}
```
{% jsfiddle https://jsfiddle.net/danywalls4/9apk3r8n/77/ result,html,css %}

## If the box is not the first on mouse over decrement the opacity.

Another amazing pseudo class is `:not` it helps to use negative selector, we can mix `:not` with `:first-of-type` and `:hover`.

```css
div.box:not(:first-of-type):hover{
	opacity:0.5
}
```
{% jsfiddle https://jsfiddle.net/danywalls4/9apk3r8n/83/ result,html,css %}

We did all tasks using pseudo class, it helps us to create great selector and fix common CSS tasks, the MDN have a great example documentation about how to use it.

# The Real use case menu

The real case is to create a menu with 3 user cases.

- By default, hide child options
- On hover show the menu and mouse out hide
- The selected option have different background.
- Menu without items display a strike line.

The markup

```html
<div class="menu">
  <div class="option">
  	<span>Home</span>
  </div>
	<div class="option">
		<span>Javascript</span>
		<div class="child-option">
		<span>React</span>
		<span>Angular</span>
		</div>
	</div>
	<div class="option">
		<span>CSS</span>
		<div class="child-option">
		<span>Less</span>
		<span>Sass</span>
		</div>
	</div>
</div>
```
{% jsfiddle https://jsfiddle.net/danywalls4/67vuyoqc/72/ result,html,css %}

## By default, hide child options

We hide the options for use pseudo class on hover to show again and simulate the behavior of menu.

```css
.child-option {
	display: none;
	background-color: black;
}
```
{% jsfiddle https://jsfiddle.net/danywalls4/67vuyoqc/74/ result,html,css %}

## On hover show the menu and mouse out hide

The pseudo class `:hover` allow me to select the child option and switch back to visible, then the basic behavior of hide and show is working.

```css
.option:hover .child-option {
	display: flex;
	flex-direction: column;
}
```
{% jsfiddle https://jsfiddle.net/danywalls4/67vuyoqc/75/ result,html,css %}

## The selected option have different background.

Again the hover and the CSS combination help us, using `>` get only child span from option without select 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` for set the background hover for his own span.

```html
.option > span:hover {
	background-color: blue;
}

.child-option span:hover {
	background-color: darkolivegreen;
}
```

{% jsfiddle https://jsfiddle.net/danywalls4/67vuyoqc/78/ result,html,css %}

## Menu without items display a strike line.

The `only-child` pseudo class help us to detect if is the only element that match with selector, the `div.option` validate the span is the only child and set the style.

```html
div.option span:only-child {
	text-decoration: line-through;
}
```
{% jsfiddle https://jsfiddle.net/danywalls4/67vuyoqc/79/ result,html,css %}

## Done!!!

That gives to you a bit of a head-start with Pseudo class.
If you enjoyed this post, please share it.