[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

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.
 
 
Search:
[Help]

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" ([M][S][Pw]):

<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 generic attribute 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:

<blockquote class="code"> .a {color:black; border:1px solid black; blackgroud-color:white}
.special {color:red}
...
<div class="a special">

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:

  1. 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.
  2. 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 ([M][S][Pw]):

[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 */

You can look at more examples from the error page, how browsers should work[S][Pw].

Browser-specific notes:.

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

  2. 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"] {...}.

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

  4. 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).

  5. 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[S]).

  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.

  2. 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

    .
  3. 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.

[Top]