Stunning Examples of CSS Pseudo-classes in Action

:target

The :target pseudo-class is triggered when the unique element with an id matches the fragment identifier of the URI of the document.
Among other uses, :target can be used to create modal popups, as demonstrated with the code below:

#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    width: 70%;
    background: #fff;
    padding: 20px;
    text-align: center;
}

#modal-container:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
}

#modal-container:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
}

Check out the demo for more info.

:empty

:empty is triggered when an element is empty. This pseudo-class is super useful to control how elements will look when they are empty. The example below shows how :empty can help to hide an element if there’s no text in it:

<figure>
<img src="hello.jpg" alt="" />
<figcaption></figcaption>
</figure>

The CSS:

figcaption {
  padding: 1em;
  background: lightgrey;
}

figcaption:empty {
  display: none;
}

This example and many others are available in detail on this article.

:hover

:hover is by far the most widely used pseudo-class. It defines the state of an element being hovered by the cursor. The following CSS code shows how to create a tooltip that will show when a link is hovered. Let’s first have a look at the HTML:

<a href="#" title="This is some information for our tooltip." class="tooltip"><span title="More">CSS3 Tooltip</span></a>

And the related CSS:

.tooltip{
display: inline;
position: relative;
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

You can see a working demo of that code here, as well as the complete tutorial.

:lang

The :lang pseudo-class is very useful when displaying different languages on a page, as it allows you to style a paragraph differently in a given language.

Here is an example of a paragraph with a French sentence in it:

<p lang="fr">Je suis Parisien!</p>

The related CSS shows how to apply a specific background color to a paragraph with a specified language:

p:lang(fr) { 
    background: yellow;
}

If you’d like to see this in action, you can check this demo.

:valid and :invalid

 The :valid and :invalid pseudo-classes are extremely useful when creating forms, as they allow you to explicitly show visitors if their input text is or isn’t valid.

Here’s a short example of a web form taken from Mozilla website:

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

The following CSS will automatically change the background colors of the text field whether the input is valid or invalid:

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

More About Pseudo-classes

As you saw in the examples above, CSS pseudo-classes are very useful as they allow you to give a specific style to an element based on the current state of that element.

There’s many pseudo-classes available for you to use, some of them still being in an experimental state (those will be covered in a future article). An index of all pseudo-classes available can be found here.