CSS advanced stylesheets

...and other shortcuts

Nested selectors
Child operator
Descendent operator
Adjacent sibling selectors
Immediately adjacent sibling operator
Related adjacent siblings operator
Attribute selectors
Attribute name selector
Attribute value selectors
First value operator
Leading characters operator
Space separated values operator
Sub-string operator
Trailing characters operator

Here are a range of CSS selector declarations, some better known than others, that enable CSS properties to be invoked with greater precision.



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.

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.

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.



Adjacent sibling selectors

The adjacent sibling selectors provide 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 that both have the same parent.

Immediately adjacent sibling operator - 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.

Related adjacent siblings operator - The related siblings operator '~' in the following selector sets the font-weight for all the <p> elements that are siblings of a <table> element, as long as the table and the p elements all share the same parent. The table element in this case must be declared in the html before the p elements for the selector to take effect.

table ~ p { font-weight: bold; }



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.

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=quot;addr"] { width: 30em; border: 1px solid gray; }


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*=quot;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; }


(Last updated 15 November 2011)