student web hosting

CSS3 selectors tutorial for advanced web designers

The Intro

This tutorial aims at shedding some light onto several of the more advanced and fancy CSS3 selectors that are available to designers for manipulating the DOM. This tutorial assumes you’ve got a solid grasp of regular CSS selectors such as tag, id, class, compound, descendant, grouped, and pseudo selectors. We’ll be covering some of the new selectors that allow for more minute selecting of elements without having to add classes or ID’s everywhere on your HTML code. There are several tutorials around the web that have covered this many times, but I wanted to give a quick shot at it, if for nothing else, to help me.

The Caveat

Using these selectors will score you major bonus points, and the ladies (or gentlemen) will be knocking down your door, but some web browsers don’t like fancy selectors (such as IE 6-8) and other older versions of Chrome, FF, or Safari. There are two common methods for getting around those pesky pesks.

  1. Use a Polyfillhttp://selectivizr.com/ will add some JS that you can add in an IE conditional that will make those versions support your fancy selectors. There is a slight performance drawback, but I suppose people using IE7 are used to that. I wouldn’t worry about that at all.
  2. Use a “Fallback” – A fallback basically means that while using a fancy CSS selector (lets say to select the first item in a list), we also give that first item in the list a classname and group the selectors together. That way it’ll work everywhere without relying on a polyfill. I personally think that if your going to use a fallback, then you might as well not use the CSS3 selector in the first place. You’ve kind of defeated the purpose, so method 1 is my vote. Always vote for method 1 if your not sure.

CSS3 “Combinator” Selectors

Okay, so let’s get down to business.  We’ll be looking at several CSS3 selectors and I’ll do my best to give some examples to de-mistify what the selectors are doing/selecting.

selector:first-child

The a:first-child selector selects the “first” child tag of a parent containing tag.  It is great for setting a border on the first element of a list item, or something similar.  Let’s say I have a list with 3 items and I want to do something specific to the first.  Before css3 selectors I would have added an extra class to the first element to style it specifically.  No longer!  Here’s the html:

To select the first list item out of that group I’d use:

We can also select the last child from a parent by using selector:last-child

parent > child

This > selector selection the direct children of a parent element.  Assuming the following HTML:

Let’s say  I wanted to select only the paragraphs that are direct children of the div, excluding the paragraphs inside of the aside tag.  The following CSS3 selector would do that:

 

Former + Adjacent

The + selector lets us select adjacent tags that are siblings to one another.  For instance I could style the captions following my image tags like so:

That will only style span tags with the class of ‘caption’ that directly follow an ‘img‘ tag.  Pretty specific!

CSS3 Pseudo Selectors

We’ve all seen the :visited and :hover pseudo selectors.  Here are a few more pseudo selectors that do some more advanced fancy selecting.

selector:nth-child(an+b)

We’ve seen how to select the first and last children in a list, but this handy selector lets us choose to highlight every ‘n-th’ item.  It makes it really easy to style every other row on a table for easy readability.

With the following code:

I could easily style every other row with:

This selector can be a bit more tricky, allowing me to select every third row as well. The folks over at Mozilla have wonderfly explained it like so:

This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.

In addition to just calling nth-child(odd), we could also represent every odd row as such:

nth-last-child(an+b)

This selector works just like nth-child(), except it starts counting from the bottom up, instead of from the top down… This could allow me to select the second to last list item child like so:

 

 selector:nth-of-type(an + b)

This works just like the previous selector but is allows you to select the children based off of their type of tag.  Useful if you have some paragraphs you’re wanting to alter but don’t know or care about tags that may come before after or in-between them.

To select the fourth paragraph within a div, you could use:

 

CSS3 Attribute Selectors

These puppies are pretty slick too!  They allow me to select html tags based off the varying attributes and values they have!  Let’s look right at our first example.

selector[attr]

This selects an html tag who has an attribute name of ‘attr’ like so:

This would select all anchor tags that have a ‘title’ attribute

selector[attr=value]

This selects an html tag who has an attribute name of ‘attr’ and a value that is exactly ‘value':

This would select all anchor tags that have a ‘lang’ attribute that equals ‘sp’ for spanish and color then green.

selector[attr^=value]

This selects an html tag who has an attribute name of ‘attr’ and who’s value is prefixed by ‘value':

This would select all anchor tags that start with a # (such as internal named anchors) and color them gold.

selector[attr*=value]

This selects an html tag who has an attribute name of ‘attr’ and who’s value contains the string ‘value':

This would select all anchor tags that have ‘twitter’ in the href value and add a custom little bird image to the background of the link. Slick!

One handy thing with these selectors is to use them in combination with the new HTML5 data attributes. There are a couple of more attribute selectors, such as suffixed values, and white spaced separated list of words.. I’ll leave those up to you to dig up.

 

CSS3 Psuedo Element Selector

 

selector::before, selector::after

I saved these for last, as they are a bit odd at first.  These selectors are actually creating a ‘psuedo element’ and then selecting that.  They are most often used to add more cosmetic styling to an existing element, without having to add additional html markup.  Also note, their official syntax is ::before (note both colons) but a single colon : is also supported for backwards compatibility.

A simple example is adding some content to a pseudo element to add quotation marks for quotes or blockquotes.

Let’s assume the following html:

In order to auto add styled quotation marks around the element I could do the following:

Many folks, including myself have gotten pretty tricky with their use of these type of selectors to pull off some amazing CSS3 based effects

selector::first-letter

There are couple of other pseudo element selectors, and I’ll quickly illustrate this one. Let’s say we want to make the first letter of every paragraph special, well we could do this:

The Credits

That’s if for this tutorial, hope you learned a thing or two about the fancy selectors. I’d like to thank my Mom, my agent, the great keyboard that I typed this on, and most of all this bag of cashews that got me through it!

Leave a Reply

*