CSS shortcuts and advanced stylsheet writing

(CSS2. This document 4 Jan 2010)
The object of this page is to provide efficient methods of invoking CSS selector declarations, not to document the entire selector syntax. When I say efficient, I am referring to the precision of stylesheet selectors. In fact several of the methods shown here use considerably more cpu time than more exacting and lengthy syntax, so, from the machine's point of view, this may not seem so efficient. Ten years ago this would have been a concern, but most computers now are fast enough that you won't notice the difference.

Care should be taken to ensure that your stylesheet remains clear in order to facilitate maintenance. Also, excessive compactness can potentially lead to making your code difficult to modify without major surgery. You have been warned!

Grouping selectors

Set the attributes for a group of selectors simultaneously by using comma delimiters

h1, h2, p, em { font-family: 'Century Gothic'; color: blue; }

You can use classes and identifiers within this syntax in the usual way

h1.firstpg, h2.firstpg, p, #bannertxt { font-family: 'Century Gothic'; color: blue; }

▲ top

Universal selector operator

The '*' operator can be used as a sort of wildcard character and is called the Universal operator. It should be used judiciously though. Each time it is invoked, every node that can possibly match the selector is checked. Poor use of the universal selector can cause your web pages to become sluggish. It is particularly handy if you want to change the overall style within a box element to differentiate it from the rest of your page, like this

body { font-family: Helvetica; color: black; }
div * { font-family: 'Courier new'; color: darkblue; }

This example creates an overall style for the page body but an individual style for everything in the <div> element.

▲ top

Nested selectors

We can use nested selectors to set up some general purpose rules about the way descendant elements get displayed. Here is a straight-forward nested tag selector

div.roundbox h1 a { color: green; line-height: 1.1em; }

The only <a> tag that this can be referring is a descendent of an <h1> tag, which itself is a descendent of a div of the 'roundbox' class. Importantly, they do not have to be direct children, which is a common misconception.

▲ top

Child operator
What if you wanted these specific properties to be set only if the h1 class was a direct child of the 'roundbox' class div, that is to say, it's immediate descendent. You could specify this relationship with the '>' Child operator, like this

div.roundbox > h1 a { color: green; line-height: 1.1em; }

We could go further and specify that the <a> tag must itself also be a child of an <h1> tag, in other words that the <a> tag only gets these properties set if it is the grandchild of the 'roundbox' class as defined like this

div.roundbox > h1 > a { color: green; line-height: 1.1em; }

No other <a> tag subordinate to the 'roundbox' class will match this statement unless it too has the same relationships.

▲ top

Descendent operator

div.roundbox * a { color: green; line-height: 1.1em; }

The '*' Descendent operator in the above example is applied to any <a> tag is at least a grandchild or greater descendent of div.roundbox. Any child <a> tags of div.roundbox will not match this statement. In other words, the <a> element must be nested within at least one element which is itself nested inside a div.roundbox element.

▲ top

Adjacent sibling operator

The sibling operator '+' provides yet another means of controlling style based on the ordinal position of an element. The 'adjacent sibling' descriptor refers to the position of the two adjacent elements within the document tree.

The following selector will define the style of the <p> element in relation to an image that immediately precedes it

img + p { margin-top: -0.5em; font-style: italic; }

In this instance, any text in a <p> element that immediately follows an image will be italicized and will have reduced space between it and the image. Ideal if you need captions under your images. Tip; If you don't want a caption under one of the images on a page, follow it with an empty <p> element.

▲ top

Attribute selectors

Attribute selectors are selectors that match elements in your web page based not on the element tag but instead on any attribute that is set. A range of attribute value match operators are available.

Attribute name selector
The simplest form of attribute match selector will match any element where the named selector is set, regardless of the value it is set to

[href] { color: red; font-style: bold; font-size: 0.8em; }

In the above example, any element that has the 'href' attribute set will have the style settings listed applied to it. This can be further refined by limiting the attribute match to a specific element type

h3[title] { font-style: italic; }

In the above example, only <h3> type elements where the title attribute has been set will be styled by this selector.

▲ top

Attribute value selectors
We can take this a step further. It is possible to write selectors to match specific attribute values. This includes the ID and class attributes. Not all of the selector operators listed below are in the W3C recommendations so it is best to test that they operate as expected across browsers. In particular, they will not work in IE6 (which should really be considered deprecated) or earlier. The simplest attribute value selector is like this

[type="button"] { width: 10em; }

The above example is useful when formatting input objects on forms. Multiple selector match conditions can be applied by placing spaces between selector values like this

[type="text"] [name="addr"] { width: 30em; border: 1px solid gray; }

▲ top

Here are the other attribute value operators that can be used to match a range of conditions;-

First value operator - Match first value in an attribute list which is hyphen separated such as 'en-us'. It is originally recommended by the W3C with language attribute matches in mind. It is not implemented in all browsers at this time

[lang|="en"] { color: darkblue; }

Leading characters operator - (Not in W3C recommendation) Similarly and potentially more useful, the next example matches the leading characters of any text string value

[title^="Diagram"] { float: right; }

Space separated values operator - In the event that you want to match a value or word anywhere in a space separated list such as 'Here are some family photos'

[alt~="family"] { border: 5px outset gray; }

Sub-string operator - (Not in W3C recommendation) Again, perhaps more usefully, you can match a sequence of characters anywhere in any text string. The following example will match 'Pictureofanoselessdog'

[alt*="nose"] { display: none; }

Trailing characters operator - (Not in W3C recommendation) To complete the collection of attribute match operators, this operator matches a sequence of characters at the end of a text string

[alt$="on the left."] { float: left; }

▲ top

Shorthand property value assignments

This is a list of property assignments that are used to set a group of properties in a single statement. Note that you may omit any of the values within a property group assignment, but the values must be placed in the order specified.

Background property

background: color | image | repeat | attachment | position
Example { background: orange url('banner.jpg') repeat-x scroll top left }

Border property

border: width | style | color
Example { border: 1px solid green; }

Border-width property

There are several ways the border width may be specified

border-width: top | right | bottom | left
Example { border-width: 1px 5px 2px 5px; }

border-width: top and bottom | left and right
Example { border-width: 2px 4px; }

border-width: top | left and right | bottom
Example { border-width: 3px 1px 8px; }

border-width: all borders
Example { border-width: 2px; }

These value assignments also apply to Margin and Padding properties

▲ top

Font property

(This is not working in IE8 or Firefox 3 at the time of writing.)

font: style | variant | weight | size/line-height | family
Example { font: italic normal bold 1.2em/150% Verdana; }

Note the use of font-size/line-height in a single value declaration. It is often useful to use the font property assignment with only this font-size/line-height value pair declared.

List style property

list-style: type | position | image
Example { list-style: disc inside url('bullet.jpg'); }

Note that if the image value is omited or not found, the style-type value will be used instead.

Margin property

Margin uses same format as the border-width property

Padding property

Padding uses same format as the border-width property

▲ top