The :target CSS pseudo-class

CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets.

:target – The target pseudo class is used in conjunction with ID’s, and match when the hash tag in the current URL match that ID. So if you are at URL www.yoursite.com/#home then the selector #home:target will match. Then can be extremely powerful. For example, you can create a tabbed area where the tabs link to hash tags and then the panels “activate” by matching :target selectors and (for example) using z-index to move to the top, or just to highlight a section of your content.

:target Browser Support

Because we are talking about CSS3, it’s supported by all modern browsers excluding IE, from 6 to 8. Disappointing as usual, but this fact shouldn’t stop you using it. However, IE9 supports the :target pseudo-class.

How can you use :target?

This pseudo-class can be styled, just like we use to style the :hover, :active or :focus pseudo-classes on links. Much like the previous ones, :target is used during certain interactions with the website. Specifically, when applied to a fragment identifier as in this example: http://www.yoursite.com/#portfolio.

Demonstration

On this demo I am going to make an example of when to use :target. The purpose of the demo is to show you how :target can improve your website usability.

View Demo

The HTML markup

Let’s look at a snippet of the html document. Below we have a list of 4 links and also the same amount of blocks. The important part here is that every element or div must have an id as an identifier.

    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <article id="home">
    <h3>Home</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus quis velit tempus convallis adipiscing
    gravida ante. Vestibulum in erat augue. Morbi at erat quis ante mattis interdum. Praesent dictum dapibus arcu. </p>
    </article>
    <article id="services">
    <h3>Services</h3>
    <p>Aenean dignissim sollicitudin ante ut condimentum. In hac habitasse platea dictumst. Maecenas sed sapien felis,
    non gravida erat. Quisque id nulla id justo feugiat semper. Phasellus interdum suscipit mollis.</p>
    </article>
    <article id="about">
    <h3>About Us</h3>
    <p>Nulla nunc urna, viverra vitae scelerisque ut, eleifend sed sapien. Phasellus aliquam dolor at velit molestie molestie.
    Mauris bibendum ultrices condimentum. Fusce tempus velit vel sapien pretium blandit. Donec vitae congue enim. Donec viverra
    fringilla enim et commodo. Suspendisse dolor risus, euismod et ultricies viverra, blandit tempor augue. Proin in felis arcu.</p>
    </article>
    <article id="contact">
    <h3>Contact</h3>
    <p>Sed faucibus sapien quis eros dapibus aliquet. Pellentesque bibendum, massa eget rutrum placerat, ipsum nibh ultrices
    tortor, vel pulvinar sem felis sed elit. Integer at felis nec est tristique vestibulum sit amet vel ligula. Suspendisse
    ante
    leo, molestie eu hendrerit non, ultricies sed enim. Morbi molestie semper ante quis egestas.</p>
    </article>

The CSS

We can use the :target attribute to highlight active sections, e.g

a:link, a:visited, a:active{
background-color: #330000;
color:#fff;
padding:10px 15px;
	}

article{
float:left;
margin:1%
background-color: #f5f5f5;
padding:10px;
width:45%;
}
 
article:target
{
background-color: #330000;
color:#fff;
display:block
}

ul li{
	display:inline;
	width:125px;
	margin: 0 25px;
	line-height:2em;
}

Below you can find the result, when a list element it’s clicked, the corresponding block will change background.

And That’s All! The :target selector offers further versatility possible to create dynamic effects in HTML5 and CSS without using JavaScript.

Thanks.