Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Stunning Examples of CSS Pseudo-classes in Action

DZone's Guide to

Stunning Examples of CSS Pseudo-classes in Action

In CSS, pseudo-classes are used to define the special state of an element. In this article, you’ll learn about pseudo-classes and how you can use them to enhance user experience.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

In CSS, pseudo-classes are used to define the special state of an element. In this article, you’ll learn about pseudo-classes and how you can use them to enhance user experience.

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

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
css ,pseudo-classes ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}