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 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.

<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>

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.

div.box:first-of-type {
    border: 5px solid green;
}

Capitalize the first letter of p

If you read my post about css combinator, using it pseudo-class is an easy task nested with pseudo-class :first-letter.

div.box > p:first-letter {
    text-transform: uppercase;
}

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.

div.box:first-of-type:hover {
    width:200px;
    height: 200px;
}

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.

div.box:not(:first-of-type):hover{
    opacity:0.5
}

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

<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>

By default, hide child options

We hide the options for using pseudo-class on hover to show again and simulate the menu's behavior.

.child-option {
    display: none;
    background-color: black;
}

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.

.option:hover .child-option {
    display: flex;
    flex-direction: column;
}

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.

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

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

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.

div.option span:only-child {
    text-decoration: line-through;
}

Done!!!

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