I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.

Class and attribute What are selectors, classes and id-attributes

Topics

Class selector

In the following example is the element P, which
have a certain CSS class-attribute. In the document body might be
CSS class-attribute class="red" ():

<P class="red">The
text in this paragraph is
red.</P>

This attribute has matching pair in the beginning of the
HTML-document or in a separate CSS-file.
Class="red" match to an element, which have the
same class name. In CSS-encoding it is connected to other
selectors with a dot like in this example:

p.red {color:red;} /* after
the dot is CSS class-attribute */

In fact in this way the element has always two or more identifiers.
First the element type name (P) and second the
class name red. These two identifiers are combined
together. If the class is connected to the universal selector, in
practice the element can be identified from the class name (the
universal selector doesn't select any specific element).

.red
{color:red;}

This rule can be used (almost) into any element by putting
class="red" to the start-tags of elements. Remark
however, that syntactical the class selector is always connected
into another identifier and rule.

In a way class selectors are attribute selectors, which use
dots as separation marks (I give some examples later). CSS2 gives
the possibility to use pure attribute-based selection method by
using genericattribute What are selectors, classes and id-attributes,
which can be understand as actual attribute selectors. In
principle any attribute and its value(s) work as identifiers.
Because class is in the semantic meaning an attribute, it
should be able to express like any other attribute. I handle next attribute selectors.

It is possible to give for same elements several classes by adding spaces (for example class="a b c"), for example:

I don't however regard that kind of practise as very good. Properties might be contradictory. Browsers get additional work and the author of the CSS might get easily confused. If they are intended to use, the author must be especially careful.

Browser-specific notes:

Class selector can be combined with another class selectors, if in the class attribute is space-separated list of classes, for example <th class="a b c">. MS IE browsers don't support properly combined class selectors. For example th.a.b.c should match with <th class="a b c"> but not with <th class="c"> as it does in MS IE browsers. Among class names a, b and b should be mentioned but MS IE takes account only the last name of in the list in the rule. MS IE behaves as if th.a.b.c == th.c. The actual name of the class can be in arbitrary place inside the class attribute, for example class="x b c a"). According to
Erich Mayer combined class selectors don't work in MS IE for Mac.

Netscape 4.x and MS IE 4.x forWindows doesn't support multiple classes for the same element (I tested class="noPrint b" and Netscape 4.79 didn't rendered a text as bold on the base of .b {font-weight:bold}).

Attribute What are selectors, classes and id-attributes

Generic attribute selectors are primary designed for XML-documents in order to ensure that CSS can be used with any XML-based language (some language require supporting of them). According to CSS2 rules like *.red
{color:red;} and p.red {color:red;} are
intended to use only in HTML-documents. In
XML-document should not use these kinds of connected rules. In
XML-document should be used universal selectors, element type selectors, attribute selectors and combinations of them.

Because XML is a meta language elements and attributes (except some basic XML-attributes) don't have any default behavior or task. Elements and attributes must be able to identify as such. Even if rules like .class {} and #id {} (I handle the latter rule type further) don't belong to strict XML-based languages browsers, which support XHTML are expected to support them. In XML-languages rules, which have the formats .class {} and #id {} should not be automatic accepted. The same concerns also the CSS, which is inside style attributes. They should work only if the used document type supports id, class and style attributes at the same way as in HTML.

Attribute selectors use brackets ([]). Attribute
selectors use attribute names and attribute values as identifiers. They work together with other selectors like in these examples ():

[href] {color:blue} /*
according to this example all elements, which have the attribute
href got blue color; only the attribute name is used as the
identifier */
[class="example"] {color: blue;} /* every element, which
have the class-attribute example got blue color; In this case
the attribute name and the exact value is used as identifiers
*/
[class~="red"] {color:red;} /* every element, which have
the class-attribute red, got red color; ~-sign is not necessary
in this case; it can be used if class attributes have space separate list of values, for example class="green red" (the rule in this example concerns also this attribute) */
*[src] {background-color:blue}
/* every element, which have the attribute src, get
background-color blue; Note, that I have put in this case the
universal selector (*) even if it is not in principle necessary */
span[class="example"] {color: blue;} /* the SPAN element,
which have the class-attribute example get blue color; - Note
that, the element type selector is attached to the attribute
selector; Space between them exchange the meaning of the rule to
this: SPAN elements, which follow an element, which has as an
attribute class="example", got blue color (I explain later more
carefully these kinds of rules) */
p[class~="red"] {color:red;} /* those P elements, which
have as a class-attribute red got red color
*/

If
class selectors are expressed as attribute selectors, they should
have the same specificity. If there is two kind of definition,
just the order of rules should matter like in these cases:

.test {color:red}
*[class="test"]{color:blue} /* this rule has the same
priority as the previous rule, but it is after it and then
overrule it; Some MS IE browsers understand this as an universal
selector */
p.test {color:olive} /* this rule overrule the previous
rule, because this is more specific */
p[class="test"]{color:green} /* this rule has the same
priority as the previous rule, but it is after it and then
overrule it */

MS IE browsers don't support
attribute selectors, which are primary designed for
XML-document.

Attribute selectors work at this moment only in Mozilla Gecko, Opera 4.x+, Safari for Mac and Konqueror for Linux browsers. In 0pera 4.x-6.x they must be explicitly together with element type or
universal selectors, for example
a[target="new"] {...} or
*[target="new"] {...}.

The format
*[...] {...} cause error behavior to some MS
IE browsers. Use rather the format a[...] {...}.

Attribute selectors can use also the | mark, for example th[class|="a"], when the class attribute has hyphen-separated list of values, which start with certain word. In combined rules, which use the | (for example td[class|="a"][id="a"]) Opera ignored the latter attribute selector (the previous mentioned rule should not match with <td class="a-b-c" id="b"< like it does in Opera).

Mozilla Gecko browsers support attribute selectors for some fictional attributes - it could be said that they support "pseudo-attribute selectors" (look at CSS notes 1).

MS IE and Opera accepts rules, which
are intended only to HTML-document. Both MS IE and Opera violate
seriously the main principles of XML. They create to CSS-related
attributes in XML automatic HTML-resembling default task, which
they should not to do.

The usage of attribute selectors is however reasonable, because I have remarked, that in some
situations it possible to give the correct result to MS IE and Mozilla Gecko or Opera only by giving with attribute
selectors a little bit different property values. It would be
even desirable, that MS IE will never support attribute
What are selectors, classes and id-attributes

.

Mozilla Gecko browsers use the proposed @namespace at-rule in XML in order to identify, if HTML CSS-principles are used. These browsers define HTML-setting in
/res/html.css file. It has in the beginning @namespace url(http://www.w3.org/1999/xhtml);. If the document has matching xmlns information (xmlns="http://www.w3.org/1999/xhtml"), they interpret
CSS according to HTML-principles and they work because in XHTML 1.0 previous mentioned attributes are supported at the same way as in HTML. Without the matching namespace attribute, they interpret CSS according to general XML-principles, when
attributes class, id and
style work only with actual attribute selectors.