How to work with CSS Selectors

Introduction to Class CSS Selector:

Selecting elements on the basis of their class names is a very common technique in CSS. The class selector syntax [class~="warning"] is rather complex, but there’s a simpler and shorter form for it: the class selector.

Here’s a simple example that selects all elements with a class that contains the value "warning":

Listing 1: Example with the value “warning”

.warning {
  ⋮ declarations
}

This example also illustrates the use of an implied universal selector-it’s equivalent to *.warning. Note that whitespace characters can’t appear after the period, or between an element type selector, or explicit universal selector, and the period. For example, the following selector will match all p elements with a class that contains the value "warning":

Listing 2: Code defined to match all p elements

p.warning {
  ⋮ declarations
}

A simple selector may contain more than one class selector and/or class selector. In such cases, the selector pattern matches elements whose class contain all the specified components.

Listing 3: Example containing all specified components

div.foo.bar {
  ⋮ declarations
}
div.foo.bar[title^="Help"] {
  ⋮ declarations
}

The first example selector above matches div elements whose class value contains both the words "foo" and "bar". The second example selector matches div elements whose class values contain both the words "foo" and "bar", and whose title class values begin with the string "Help". To clarify further, the html that would match the above selectors could be as follows:

Listing 4: HTML with the <div< class

<div class="foo bar">Matches first example</div>
<div class="foo bar" title="Help">Matches second example</div>

The following selector will match all p elements with a class that contains the value "intro":

Listing 5: Matching all p elements

p.intro {
  ⋮ declarations
}

Browser Compatibility

In Internet Explorer 6, the class selector doesn’t work if the class name starts with a hyphen or an underscore.

In Internet Explorer up to and including version 6, only the last class selector is honored; all others in a chain of class selectors are ignored. For example, a selector like .x.y.z will match all elements with a class that contains the value "z", but will not restrict the match to elements that also have the class values "x" and "y", which it should.

In Internet Explorer versions up to and including 6, if an ID selector that’s combined with a class selector is unmatched, all subsequent ID selectors that use the same ID and are combined with a class selector, are also treated as unmatched.

ID CSS Selector

Listing 6: ID Selector Syntax

#ID {
declaration block
}

An ID selector matches an element that has a specific id class value. Since ids are unique across the page, an ID selector can never match more than one element in a document.

By ID class, the CSS specification doesn’t necessarily refer to a class whose name is id. An ID class is one whose type is declared as ID in the document type definition (DTD), or similar, for the markup language. In HTML (and XHTML), this selector matches the id class, but in XML it would apply to any class for which a type of ID was specified.

Since class types are declared in a DTD or schema-information that user agents don’t normally read-ID selectors shouldn’t be used for XML other than XHTML, unless you know that user agents have built-in knowledge about ID class.

In its simplest form, an ID selector looks like this:

Listing 7: Defining the ID selector

#navigation {
  ⋮ declarations
}

This selector matches any element whose id value is equal to "navigation". In this selector, which is equivalent to *#navigation, the universal selector is implied. The universal selector is often omitted in cases like these.

Of course, it’s possible to use a type selector with an ID selector, but it’s rarely necessary, since an ID uniquely identifies an element. Here’s an example that only matches an unordered list element with an id class value that’s equal to "navigation":

Listing 8: Matching an unordered list element

ul#navigation {
  ⋮ declarations
}

There must be no whitespace characters between the type selector and the ID selector.

This example selector matches any element whose id class value is equal to "breadcrumbs":

Listing 9: Matching element with class value equal to “breadcrumbs”

#breadcrumbs {
  ⋮ declarations
}

Browser Compatibility:

In Internet Explorer 6, an ID selector is ignored unless it’s the last ID selector in the simple selector.

In Internet Explorer versions up to and including 6, if an ID selector that’s combined with a class selector is unmatched, all subsequent ID selectors that use the same ID and are combined with a class selector, are also treated as unmatched.

CSS 3 Selectors Examples

Figure 1: CSS 3 Selectors Examples

Class Selector (CSS selector)

Listing 10: Class Selector Syntax

[ { class | class { = | |= | ~= } class value } ] {
declaration block
}

A class selector will match elements on the basis of either the presence of a class, or the exact or partial match of a class value. Class selectors were introduced in CSS2.CSS3 added a few more. Class selectors are delimited by square brackets; the simplest form of a class selector consists of a class name surrounded by square brackets:

Listing 11: Class selector with square brackets

[href] {
  ⋮ declarations
}

This example selector matches any element that has an href class. It also contains an implied universal selector, and is equivalent to *[href].

Listing 12: Example with an href class

a[href] {
  ⋮ declarations
}

This selector matches any element that has an href class, so it matches a hypertext link, but not a named anchor.

Class selectors can also specify a value, or a partial value, to match. The values must be strings, in which case they’re surrounded by single or double quotes, or identifiers, without quotes. All the examples below use strings.

The value specified in a class selector is case sensitive if the class value in the markup language is case sensitive. Thus, values for id and class in HTML are case sensitive, while values for lang and type class are not.

It’s not always easy to remember which HTML classes are case sensitive and which aren’t. It’s usually best to assume that everything is case sensitive.

We can use the = operator to have a class selector match elements that have specific values:

Listing 13: using the = operator

input[type="submit"] {
  ⋮ declarations
}

This selector matches any input element that has a type class with a value equal to "submit".

Typically the structure of a primary navigation list is a <ul> (usually with an ID like #nav or #navigation) then a few list items (<li>) inside of it. Each <li> has its own <a> tag inside that links to other pages. This HTML structure is perfectly correct, but the CSS selector is the thing to worry about.

There’s no reason for the ul before #navigation since an ID is already the most specific selector. Also, you don’t have to put li in the selector syntax because all the elements inside the navigation are inside list items. So there’s no reason for that bit of specificity.

Thus, you can condense that selector as:

#navigation a { ... }

This is an overly simplistic example because you might have nested list items that you want to style differently (i.e. #navigation li a is different from #navigation li ul li a); but if you don’t, then there’s no need for the excessive specificity.

Let us discuss the need for an ID in this situation. Let’s assume that this navigation list is inside a header div (#header). Let us also assume that you will have no other unordered list in the header besides the navigation list. If that is the case, we can even remove the ID from the unordered list in our HTML markup, and then we can select it in CSS as such:

#header ul a { ... }

Always write your CSS selectors with the very minimum level of specificity necessary for it to work. Including all that extra fluff may make it look more safe and precise, but when it comes to CSS selectors, there are only two levels of specificity: specific, and not specific enough.

Conclusion

We discussed CSS selectors and their browser support. See you next time.

More posts about CSS Selectors:

• The new CSS3 selectors
• Using the CSS Selector with JQuery
• How to use the Advanced CSS selector to access every element in page