css advanced selectors

Do not visit this page!

Universal SelectorThe universal selector (denoted by a star, *), affects every element on a page.

* {color: #bb0; }

IE6 supports the universal selector. In most cases it can be omitted as it is implied by inheritance. The two rules below are equivalent:

* p {text-indent: 2em; }
p {text-indent: 2em; }

However, it does become useful when used in concert with the child combinator, as it can take the place of any element which may occur in between two others, as in

p > * > em {font-size: larger; }

A rule like this would allow the second em element in our example above to be styled, but not an em which was inside a further element, as in a case like

Seriously, do not visit this page!

It should be apparent that you can chain any of these rules together into a single complex rule.

Attribute Selectors
CSS2 also allows you to apply styling to an element based on the attributes it has defined in it, or even based on the values of these attributes. Firstly, to select the elements with an attribute defined, you infix the attribute name surrounded by square brackets:

abbr[title] {border-bottom: 1px dashed #0c0; }

This would apply styling to all abbr elements which have the title attribute, whatever its value. Taking this a step further, you can select an element that has a precise value specified:

a[href=”http://www.yourhtmlsource.com/”] {font-weight: bold; }

This rule will match a link with the exact href of ‘http://www.yourhtmlsource.com/’. Note that the value is wrapped in double-quotes.

While this could quickly make your CSS file very big and clumsy-looking, it’s undoubtedly a useful power to have at your disposal. This selector comes into its own when you’re styling an XML document, where much of an element’s information may be written in as an attribute value.

There’s also a basic pattern-match selector which can look for a single word in an attribute’s value. If the value is a space-separated list (a sentence, in other words), you can write a rule to look out for certain words.

a[title~=”Mail”] {text-decoration: none; }

The operator in use here is a tilde (~) followed by an equals. It would match something like

Send me email.

You can link many attribute selectors into a single rule to find a specific element:

p[align=”right”][class=”intro”] {line-height: 1.8em; }

Pseudo-classes
Despite all the different elements you can get to with the selectors above, there are parts of a document that don’t exist as elements by themselves — they are merely parts of elements, or elements in a particular state, like the first line of a paragraph, or a form field that has been focused on. CSS pseudo-classes and pseudo-elements allow access to these otherwise inaccessible things.

You may have already seen the link pseudo-classes, :link, :visited, :active and :hover. These serve as a good introduction as to how pseudo-classes work — a link becomes classed with a:active when it is clicked on, but there is nothing in the HTML document that makes it so.

Dynamic Pseudo-classesWhile :hover has been seen before on links, the specifications allow this class to be applied to any element. This means you can highlight a paragraph or quotation when the user mouses over it. There are many interesting applications for this property. Set it up like this:

p:hover {border: 1px solid #0c0; }

The :focus class is activated when a user clicks on or tabs to an element, usually a form field or link. Highlighting a form field while the user is filling it in is a nice interface effect.

input:focus {background: #ffe; border-color: #c00; }

These pseudo-classes are not what’s called ‘mutually exclusive’ — that is, an element can have one or more of these classes activated at once. To style an input that is focused and being hovered on, write

input:focus:hover {background: gold; }

Structural Pseudo-classesCSS allows access to child elements based on their position inside a parent. CSS2 included the :first-child class, which was added to an element if it was the first tag inside another element. The selector below would add style to the first paragraph in the example HTML, but not to the second one:

div#intro p:first-child {font-size: 110%; }

CSS3 took this two steps further, by adding the :last-child and :nth-child classes. The former is simply the last element to occur within its parent. The :nth-child element is more complex — allowing access to either a numbered element, or allowing you to cycle through multiples of a number. This means you could style every third row of a table differently, for instance.

In the examples below, first I style the fifth paragraph in a blockquote. The second selector will match every second row in a table. Remember that the :first-child is numbered 1.

blockquote p:nth-child(5) {color: gold; }
table tr:nth-child(2n+1) td {background: silver; }

To simplify the calculation, you can use the values odd and even: p:nth-child(odd).

Pseudo-elements
Pseudo-elements allow you to style fictional elements which don’t actually exist in the HTML code, like the first line of a paragraph. Pseudo-elements can only be the subject of the selector (the right-most element).

Textual Pseudo-elementsThe ::first-line element can be used with any block-level tag, and applies to the first line of text running across the screen. If the window gets smaller and some words drop down onto the next line on the screen, they are no longer part of the ::first-line. This element is useful to bring in the commonly-used practice of capitalising the first few words of an opening paragraph:

div#content p:first-child::first-line {text-transform: uppercase; }

Similarly, the ::first-letter pseudo-element gives access to the opening letter of any element. This is useful in creating ‘drop-caps’ — the large letters normally seen at the start of newspaper stories. If the first character in the element is an opening-quote mark, it is counted as part of the ::first-letter, along with the letter that comes after it.

p::first-letter {font-size: 200%; padding: 3px; border: solid black; border-width: 1px 0 0 1px; }