CSS3 Selectors

By Simon

So I have been working on a project at home and decided to build it using HTML5 and CSS3 in order to brush up on my skills and bring me up to speed with these new technologies.

I have previously had a play with CSS3 and played around with the shiny new features such as box shadow, border radius etc, but it wasn't until I started this project I realised just how powerful it was.

Iwas asking one of the front-end developers for some advice and they ened up pointing me in the direction of selectors. Of course I have used selectors before when I've been coding in CSS2, for instance to select the last item in a list ':last-child' and to select the hover state of a link ':hover', however CSS3 opens up a whole new world of possibilities.

A few of the selectors I have been using are ':first/last-of-type' which will select the first or last element of that type for instance a paragraph tag(<p>).  ':nth-child(1)' which will pick a specific child of a parent element.

The possibilities these selectors present us with is monumental in my eyes, it lets us streamline our styles and more importantly keep our styling consistent across our site.

Big thumbs up from me, and I can't wait to start using all the other bits and pieces CSS3 has to offer.

 For a full list of the new selectors check out sitepoint's reference list: http://reference.sitepoint.com/css/css3psuedoclasses

Related posts