How To Use CSS3 Pseudo-Classes

CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria.

Screenshot

Before we look at these new CSS3 pseudo-classes, let’s briefly delve into the dusty past of the Web and chart the journey of these often misunderstood selectors.

A Brief History Of Pseudo-Classes

When the CSS1 spec was completed back in 1996, a few pseudo-selectors were included, many of which you probably use almost every day. For example:

  • :link
  • :visited
  • :hover
  • :active

Each of these states can be applied to an element, usually <a>, after which comes the name of the pseudo-class. It’s amazing to think that these pseudo-classes arrived on the scene before HTML4 was published by the W3C a year later in December 1997.

CSS2 Arrives

Hot on the heels of CSS1 was CSS2, whose recommended spec was published just two years later in May 1998. Along with exciting things like positioning were new pseudo-classes: :first-child and :lang().

:lang
There are a couple of ways to indicate the language of a document, and if you’re using HTML5, it’ll likely be by putting <html lang="en"> just after the doc type (specifying your local language, of course). You can now use :lang(en) to style elements on a page, which is useful when the language changes dynamically.

:first-child
You may have already used :first-child in your documents. It is often used to add or remove a top border on the first element in a list. Strange, then, that it wasn’t accompanied by :last-child; we had to wait until CSS3 was proposed before it could meet its brother.

Why Use Pseudo-Classes?

What makes pseudo-classes so useful is that they allow you to style content dynamically. In the <a> example above, we are able to describe how links are styled when the user interacts with them. As we’ll see, the new pseudo-classes allow us to dynamically style content based on its position in the document or its state.

Sixteen new pseudo-classes have been introduced as part of the W3C’s CSS Proposed Recommendation, and they are broken down into four groups: structural pseudo-classes, pseudo-classes for the states of UI elements, a target pseudo-class and a negation pseudo-class.

W3c in How To Use CSS3 Pseudo-Classes
The W3C is the home of CSS.

Let’s now run through the 16 new pseudo-selectors one at a time and see how each is used. I’ll use the same notation for naming classes that the W3C uses, where E is the element, n is a number and s is a selector.

Read More by: http://www.smashingmagazine.com/

Advertisements
By routhu Posted in CSS, CSS3 Tagged