PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Explaining CSS Selectors Part II

Posted by on 19th Mar 2009 | 1 comment

See last weeks post for part one of Explaining CSS Selectors.

Attribute Selectors

Attribute selectors allow you to target a group of items on a page by matching a particular attribute. This opens up a whole new method of selecting your targets. Unfortunately attribute selectors are not supported in IE6 (which is why they’re not very commonly used), and IE7’s support is a bit buggy at times, however with IE8 out today, hopefully support for these selectors will be greatly increased and we can finally get away from being held back by supporting IE6 users.

Attribute selectors can be used in a number of ways. You start with either a HTML selector or the universal selector (*) followed by the attribute selector within square brackets ie.

[sourcecode language="css"]img[alt] { border: 2px solid red; }
img[rel="external"] { border: 2px solid blue; }
img[alt~="photo"] { border: 2px solid green; }
p[lang|="en"] { color: red; }[/sourcecode]

Going through the methods above:

  1. This will give any image on a page a red border if the image has an alt attribute
  2. This will give any image with an attribute of rel that has the exact value of external, a blue border
  3. This will give any image with an alt attribute whose value contains the word photo somewhere in it, a green border
  4. This will set any paragraph of text to be red, if it has been assigned a language attribute whose value starts with ‘en’ followed by a hyphen and then usually further information eg. en-US or en-GB

Pseudo-classes

Pseudo-classes allow you to target even more specific elements on the page. We’ve seen some of these before however I’ll cover them all below.

:first-child

The first-child pseudo-class matches an element that is the first child element of another element. For example, to target the first list item in a list you could use

[sourcecode language="css"]ul li:first-child { margin-left: 20px }[/sourcecode]

:link

Allows you to specify the properties for an unvisited anchor link eg.

[sourcecode language="css"]a:link { colour: blue; }[/sourcecode]

:visited

Allows you to specify the properties for a visited anchor link.

Dynamic pseudo-classes

There are 3 dynamic pseudo-classes that are usually activated by a user on the page. The 3 selectors are

:hover
Activates when the user hovers their pointer over an element on the page eg. a link
:focus
Activates when the element has focus
:active
Applies when the element has been activated

Next week I’ll cover the last of the selectors, the pseudo-elements, and also give some every day examples of using these more advanced selectors.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

1 comment - Leave a reply
  • Posted by Play Games Win Prize on 21st Mar 2009

    Thank you for the tips and explanations. I do not know HTML,PHP, or any type of coding. I just follow posts like these to get around :)

    -Mike