Attribute Selectors

• Type Selectors use HTML tags (now called 'elements').
• Attribute Selectors use names
  • ID
  • Class

The CLASS Attribute

Classes can be a very effective method of applying different style attributes to structurally identical sections of an HTML document - a selector based on location.

When you want to provide variety, for example you do not want EVERY use of P to get the same treatment, you can give the differing treatments their own names.
A selector with an identifying name will let us match elements based on the element's position in the document structure, e.g., '.mytable'.

Be careful what names you choose. All versions of Netscape ignore the P.1name style definition because it begins with a number, while Explorer displays it as you expect. Under CSS1 specifications, selectors can't start with a number.

Selectors may be grouped with tag identifiers (HTML elements) in the STYLE sheet
eg -

<STYLE>
H2, .mytable {background-color:pink}
</STYLE>

<H2>All H2 headings have a pink background</H2>

All H2 headings have a pink background

This sentence has a background coloured pink

The naming game

In real life, you might decide that your web pages should have some sort of emphasised introductory paragraph, say an abstract. You think at first that they should use italic font, so you call the new class 'italic'. Later you discover that italic font is hard to read on some platforms so you settle on giving abstracts a normal font on a background color of light yellow. Thanks to style sheets, you only have one place to change, and all occurrences of 'italic' class will now render as you intend - but the all web pages still say 'class=italic' - very confusing! Much better is to name the class 'abstract', reflecting the purpose rather than the implementation.

One can address all elements of the same class by omitting the tag name in the selector:
.pastoral { color: green } /* all elements with CLASS pastoral */
Only one class can be specified per selector. 'P.pastoral.marine' is therefore an invalid selector in CSS1.

<STYLE TYPE="text/css">
.blue {color: cyan; background-color: violet}
.green {color: lime; background-color: black}
</STYLE>

Oooh...you have beautiful eyes!

I know. But you aren't too bad yourself.

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:

 .punk { color: lime; background: plum }
P.warning { font-weight: bolder; color: red; 
		background: palegreen }
 .see { color: darkred; background: lightcyan }

These classes could be referenced in HTML with the CLASS attribute:

<H4 CLASS=punk>Proprietary Extensions</H4>
<P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...

Proprietary Extensions

Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...

In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.

A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.

I have used the 'CLASS=sea' to show one problem I notice - that the space between the paragraphs is not coloured.

Can I Have More Than One Class?

And there is more ...

Working with HTML, authors may use the dot (.) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div.value and div[class~=value] have the same meaning in the style sheet. The attribute value must immediately follow the "." with no white space.

W3C selectors may range from simple element names to rich contextual representations.

The following table summarizes W3C Attribute selectors syntax and when first defined in CSS: