CSS 2 Selectors

CSS 2 selectors are an extension of CSS 1 selectors, but, as you might expect, they add more options and features to the mix. These selectors are supported by modern browsers, so there is no reason not to start using them to make your style sheets more specific and direct.

CSS 2 Universal Selector

A universal selector is exactly what it sounds like: a selector that selects universally. In other words, if you use the universal selector it will match the name of any element type in your document. It is written as a star:

*

You can use the universal selector any place you would use an element name. So, for example, if you wanted to match any child element in a blockquote, you would write:

blockquote * { ... }

CSS 2 Attribute Selectors

With CSS 2 you can now select elements that have specific attributes. You can also match on the attribute's value. For example, if you want to set a style on all anchor tags that have the href attribute (and not match on anchor tags that don't, such as named anchors), you would write:

a[href] { ... }

If you wanted to only match on anchors links that pointed to a specific site, you would write the following. Note that this must be an exact match, links that pointed to sub-pages within the href listed would not match.

a[href="http://webdesign.about.com/"] { ... }

You can also do partial matches on attribute values:

• [att~=value]
  Match when the attribute value is a space separated list of values, one of which is a match.

  span[style~="boxTop"]

  Matches on <span style="boxRed boxTop">
  
  
• [att|=value]
  Match when the attribute value is a hyphen separated list of words, the beginning of which is a match. This is primarily used to match on language sub-codes:

  *[lang|=en]

  Matches on en-us and en-uk.

New CSS 2 Pseudo-Elements and Pseudo-Classes

CSS 2 brings a number of new pseudo-elements and -classes.

• :first-child
  The first-child pseudo-class matches the first child element of another element, no matter what it is. If you define it with an element e.g. p:first-child, that will look for every <p> tag that is a first child, and ignore other ones.
• :hover and :focus
  The hover and focus pseudo-classes act like the :active pseudo-class from CSS 1. Hover takes effect when the mouse is hovering over the element in question, and focus when the element has the browser focus.
• :active
  While this pseudo-class existed in CSS 1, it now applies to all elements, not just links. It also is no longer mutually exclusive with other pseudo-classes. For example, an element can be both :active and :visited.
• :lang
  This pseudo-class specifies how the human language of the element is determined, so that you can match an element based on it's language.
• :first-line
  Works like the :first-child pseudo-class, but this pseudo-element applies to the first line of text in the element.
• :first-letter
  This pseudo-element allows you to select the first letter of an element to create drop-cap or initial cap styles.
• :before and :after
  These allow you to insert generated content into your document before or after the element in question.

CSS 2 Child and Sibling Selectors

CSS 1 allowed you to select elements that were descendants of another element, but with CSS 2 you can now specify that you only want direct children selected, or you only want elements that are siblings (have the same parent) of one another.

Child Selectors
A child selector is written with a greater-than sign (>). To match all p elements that are children of a div element you would write:

div ] p { ... }

You can also combine child selectors with descendant selectors. For example, to match all p tags that are descendant from an ordered list child element that is decendant from a div, you would write:

div ol]li p { ... }

Adjacent Sibling Selectors
Adjacent siblings are elements that are right next to each other and at the same level in the document tree. They would have the same parent and would be right next to one another in the document. For example, if you wanted to style all h2 elements that immediately follow an h1 element (but do not have another element, such as a p in between), you would write:

h1 + h2 { ... }

As with child selectors, you can combine other selectors. For example, to match all paragraphs that follow an h2 with a special class, you would write:

h2.special + p { ... }

Use CSS 2 Selectors

Understanding and using CSS 2 selectors will make your style sheets more powerful. You can match elements more directly and specifically, and display styles that exactly bring across your meaning. CSS 2 selectors are an important part of CSS.