Whereas a universal selector will match any element, an element type selector only works with elements with specific element type name. Type selectors are not sensitive to case in HTML, including XHTML served as text/html, but are case sensitive in XML, including XHTML served as XML.

All versions of Internet Explorer up to IE6 are not supportive of and ignore the abbr element. Dean Edwards was resolved this with a simple solution. He came up with the idea that if the “html” namespace prefix is applied in the selector html\:abbr, IE6 and earlier versions of the browser could be “forced” to recognize the element and carry out the declarations.

In the example below, we grouped two element type selectors (Refer to Selector Grouping)- one for IE6 and another for all browsers that support abbr:

html\:abbr, abbr {
cursor: help;
font-style: italic;
}

The Class Selector

Another common technique in CSS is the selection of elements based on their class names. The attribute selector syntax [class~=”warning”], being somewhat “awkward,” has been brushed aside in favor of a simpler and shorter form: the class selector.

The following is a short example showing how all elements could be selected with a class attribute containing the “warning” value:

.warning {
⋮ declarations
}

The given example also showed the application of an implied universal selector that is equivalent to *.warning. Bear in mind that whitespace characters will not appear after the period and between the element type or explicit universal selector and the period. For instance, the selector below will match all p elements bearing the class attribute with the “warning” value.
p.warning {
⋮ declarations
}

A simple selector may be assigned with more than one attribute and/or class selector. By doing so, the selector pattern matches all elements, whose attributes bear all the specified components. Review this example:
div.foo.bar {
⋮ declarations
}
div.foo.bar[title^="Help"] {
⋮ declarations
}

The first sample selector is compatible with div elements with a class attribute value containing the words “foo” and “bar.”

The next example selector matches div elements whose class attribute values bear both words and whose title attribute value starts with the string “Help.”

The class selector will not work on IE6 if the class name begins with a hyphen or an underscore.
All IE versions up to IE6 only recognize the last class selector and ignore all other components in a string of class selectors. For example, a selector such as .x.y.z will match all elements with a class attribute valued at “z,” but will not exclusively match to all elements that similarly have the class attribute values “x” and “y,” which it needs to do.

On IE6 and all earlier versions of the browser, if an ID selector is combined with an unmatched class selector, all subsequent ID selectors using a similar ID and are joined with a class selector, will also be considered unmatched.

Tags: The Element Type Selector