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

<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 help 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, the using it and pseudo class is an easy task nested with pseudo class :first-letter.

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

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.

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

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.

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

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

<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 use pseudo class on hover to show again and simulate the behavior of menu.

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

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.

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

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.

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

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

Done!!!

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