CSS3 - Element State Pseudo Classes

Not all CSS pseudo classes look at the page structure. The ones that were first introduced to work with links certainly didn't as they work with the state of the link rather than where it it is in the page structure. CSS3 also adds some further pseudo classes that work with the state of elements in the web page.

for example if you have the following style defined in your CSS:

#myid:target {background-color:#ccc}

then this will impact the following element in your web page:

<div id="myid">

but only if it has been reached directly from a link such as:

<a href="#myid">go to myid</a>


input[type='text']:disabled {border:1px solid #ccc;}
input[type='text']:enabled {border:1px solid #000;}


The latest versions of all browsers will recognise these selectors. Earlier versions may not.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow