Technical Tips: Use the power of selectors

Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended to read - some useful aspects can be found in the list below. Note that selectors ‘>’ and ‘+’ aren’t supported in IE6 and earlier versions of Internet Explorer (updated).

• You can use child selectors. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]

1. div > strong { color:#f00; }

• You can use adjacent sibling selectors. An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]

1. p + p { color:#f00; }

• You can use attribute selectors. Attribute selectors match elements based on the presence or value of attributes. There are four ways for an attribute selector to match:

1. [att]
2. Matches elements that have an att attribute, regardless of its value.
3. [att=val]
4. Matches elements that have an att attribute with a value of exactly “val”.
5. [att~=val]
6. Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
7. [att|=val]
8. Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.

• The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:

1. p[title] { color:#f00; }

• The selector matches all div elements that have a class attribute with the value error:

1. div[class=error] { color:#f00; }

• Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):

1. blockquote[class=quote][cite] { color:#f00; }

• You should use descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]

Kaynak: Smashingmagazine