Over a million developers have joined DZone.

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

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
css ,pseudo-classes ,web dev

Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}