More advice for the full screen mode.
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.
To the normal page


The basic method on CSS is to apply CSS-properties to elements according to certain principles. The browser must be able to identify elements. Excluding direct style attributes, the browser creates from element identifiers like patterns. That's why in CSS is written about pattern matching. In CSS and and documents, which use CSS must have matching pairs.


If the CSS is defined in external style sheets, they work like some kind databases (they correspond handwritten databases). To get CSS from external style sheets can compare situations, where the content comes from from databases.

CSS makes possible dynamic presentation updating. In embedded CSS the "database" goes with the document. It doesn't fulfil the idea of dynamic presentation updating in other way than the embedded CSS gets from server-side scripts from some external file.

In order to find pairs in the "CSS-database" and the current document, the browser needs so-called selectors. They select, what element or elements get defined CSS-properties. I introduce you in these pages into basic CSS2 selectors (like universal selectors, (element) type selector and class selector) and pattern matching rules.

W3C: CSS2: 5 Selectors; 5.1 Pattern matching[Pw].

In this page I handle also attributes class (class="...") and id (id="..."), because some selectors use them.

Selectors have different weights compared to each others, so they create the cascading order. I handle in this page that aspect introductory. In the page 5[S][Pw] I handle some selectors (first-child What are selectors, classes and id-attributes and adjacent sibling What are selectors, classes and id-attributes), because it is easier to process them in another connection. I collect in that page matching rules. I handle also deeper, in which order the browser should read CSS-definitions (what should be in the practise the cascading order). These two pages belong close to each others and I present matters a little bit different order as the official specification.


Basic selector types and grouping


Universal What are selectors, classes and id-attributes

Using the universal selector means, that defined properties are applied to any element. The browser doesn't try to find any specific element from the document. It just finds all possible elements, which CSS can be applied. Universal selectors have the lowest priority from the selectors.

A remembrance. As I have mentioned earlier whole tags are not identifiers, but something, which are inside tags work as identifiers. Concerning universal selectors, the identifiers are just names of the elements (generic identifiers) = tags without open and close delimiters and attributes. For example P or B work as identifiers (look at the term tree of the word identifier ([S][Pw]).

The bare universal selector is the most common way to select something. In the following examples is some other ways to use the universal selector in HTML-documents ([M][S][Pw]):

*{color:red;} /* the first sign is so-called wildcard, which is in this connection necessary; it is common habit to use wild cards (* and ?) in computer applications */
*.other {color:blue;} /* in this case the wild card in not necessary, because there is a separation dot and after the dot is so-called class selector, which I explain later */
.other {color:blue;} /* this is equal to the preceding way */

As you can see, selectors are connected into declaration-blocks (the explanation[S][Pw]). When a declaration-block has been affiliated into an announcement of some selectors, it is a rule. This is a very simple rule:

{font-family: Verdana, Arial, sans-serif;
font-size: 10pt;

The following conceptual scheme illustrates the relationships of different terms (the * means the universal selector or any other possible selector; The declaration-block can have multiple declarations):

selector property value
* { font-family : Verdana, Arial, sans-serif; }

Rules are called also as rule sets and statements. Exactly written rules are statement-blocks (or block-statements look at also the Footnote 1[Pw]). Simple rules and complex rule sets always 1) identifies the elements in a page that it affects and 2) tell the browser how to draw these elements (what are the properties of the selected elements).

Element type What are selectors, classes and id-attributes

The most common way is often too covering and in practice the universal selector has always some specifier. Element type selectors have the next higher priority. In fact the pattern matching principle begins really work from element type selectors, because the browser must search for individual targets. That's why the basic selector can be regarded a simple element type selector or just a type selector.

In this case the identifier is the name of an element. The following rule concerns the element H2 ([M][S][Pw]):

h2 {color:#660033; background-color:#ff3; border:#660033 1px solid; font-size:17px}

The element type name in the CSS-rule and the corresponding name inside start-tags create matching pairs.

Remember, that in XML element identifiers are always case sensitive. In XML the element type names in the CSS-rules and in the target documents must have the same cases.

Browser-specific notes:

  1. Into CSS3 has been added more XML namespace depending selectors (for example *|*, |* and ns|*, where ns is the XML namespace, which elements CSS should be applied). At least the universal selector related rules are supported in new Mozilla Gecko (for example Netscape 6.x+) and Opera 7.x browsers.

  2. MS IE 5.x+ support with non-standard way XML namespaces (ns\element).

W3C: CSS3 module: W3C What are selectors, classes and id-attributes (W3C Working Draft 26 January 2001).


So that same declaration-blocks should not be repeated to many elements, it is possible to use grouping. In a group can be called any type of selector with different combinations (I explain later, what some individual rules might mean). In this connection is elementary only to know, that individual members in the group are separated with commas. Here is some example of possible groups ([M][S][Pw]):

h1,h2,h3,h4,h5,h6 {color:red; background-color:yellow; border:red 1px solid;} /* in this group is only simple type selectors, which instead of separate definitions are defined at the same time; repeated commas are allowed and the list should not end with a comma */
h1, p.red {color:red;background-color:yellow;border:red 1px solid;} /* in this group the second member has class-specifier - I explain next the usage of it */
ol li, ol li li li {color:red;background-color:yellow;border:red 1px solid;} /* in this group is some matching patterns (I explain the usage of them in other connection) */

Footnote 1. The difference between statement and rule is, that statement has wider scope. Besides rules, which are connected to selectors, it includes also so-called at-rules (the list of at-rules[S]). CSS and HTML has also comments, which can be call as comment statements.

John Allsop: Statements[Pw].


Class selector, attribute selectors and id selectors


Common about class, attribute and id selectors

The matching criterion can be specified by using class and id (= identification) attributes and corresponding selectors: class selector or id selector. According to the CSS2 specification the names inside class and id attributes work as identifiers to elements.

The class selector is designed to many elements in the same document. The basic idea of using class selectors is to give the possibility to avoid the limitation of element type identifiers (element names). Using class selectors you can create as many "new elements" as you need.

Class and id selectors (like attribute What are selectors, classes and id-attributes, which I handle later) have higher weight as bare element type selectors. According to the HTML specification the name of the id attribute should be document-wide unique. The id attribute has been called also as the fragment identifier. In principle an id-attribute works as as an unique identifier of some fragment of a web page.

It is however remarkable that CSS-capable browsers accept in CSS the same value of the id-attribute in several places in a document. In practise id selectors could be used (against HTML-specifications) in several places in the same document together with class selectors. In this case classes would define common properties and an id selectors would specify exceptional properties. Indeed the problem is that if documents are intended to check with some validator services, they complain errors. The same result can however be achieved by using for the same element several classes (I give an example further).

  • The name must start with a normal letter (a-z,A-Z). Accepting the underscore (_) has been afterward added into CSS2.
W3C: Errata in REC-CSS2-19980512.
  • You can use also number + hyphen, but you can't start with them.
  • Names are case-insensitive in HTML and case-sensitive in XML.
  • If you want to use special character, you must put the escape character \ (backslash) before them like w\?. In theory it is also possible to use ISO 10646 characters 161 and above as a numeric code. It is possible to use character references inside style attributes (like style="voice-family: D&#252"), but these don't work in external files or inside the element STYLE (they need escaped characters with backslashes).

Browser-specific notes:

  1. Browsers accept illegal names. MS IE 5.x for Windows accepts them most. This matter has been fixed in MS IE 6.0 for Windows in the standard-compliant mode[S]. Also most Netscape and Opera browsers accept illegal names but less than MS IE 5.x for Windows. I have a a model page[S][Pw]in order to test this matter.

  2. Some browsers handle always the values of the class as case-sensitive, but some browsers don't. Use is rules, which refer class or id attributes in name the same cases, which are in the actual documents.

  3. I don't recommend to use any special character, because according my tests they work (at least partial) in Netscape 6.x+ and MS IE 6.0 Windows browsers.

Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.


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


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.


Id selector

In order to separate it from other identifiers, the name is in the element inside the attribute id. In CSS-encoding it use the character #. It can be immediately connected to other selectors without a dot. If it is connected to the universal selector, the format is *#some-id. This is however unnecessary, because they don't need explicit to connect any element type selector. At this matter they work like attribute selectors. An example of using id What are selectors, classes and id-attributes ([M][S][Pw]):

The id selector match only to element H1</TITLE>
<STYLE type="text/css">
h1#z98y {letter-spacing: 0.5em } /* remark the # sign, which express that this is an id selector; It doesn't use a dot; If you put a space, you get an another rule */
<H1 id="z98y">
Wide text</H1>

Id-selectors have higher weight than than attribute selectors. Then for example #p123 {...} is more specified than [id="p123"] {..} even if they match to the same place in the body of the document like <P id="p123">) like style="color:#660033; background-color:yellow;". This matter have any meaning today, but thinking about future, this is worth to keep in mind (look another example from the error page[S][Pw]).

Even if style-attributes don't have actual rules (they have only individual declarations and a single declaration-block), they create in the processing logical rules, which correspond the weight of them. According to CSS1 specification id-selectors have the same weight as declarations, which are inside style-attributes:

A declaration in the STYLE attribute of an element (...) has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet.

The CSS2 specification says (6.4.3 Calculating a selector's specificity), that they are considered to be after all other rules. This not a matter of weight but the cascading order[S], which I handle later.

Browser-specific notes:.

  1. The same kind of identification method is used also other than CSS-definitions, which might cause confusions for the author. Java-scripts use them also. It is however possible to use the same id attribute both with CSS and JavaScript encoding - to the latter the values of id attributes must be unique!

  2. The same id attribute for CSS and JavaScript doesn't normally cause any trouble to the UA, because they are interpreted with different interpreters. I got however an e-mail, where I was told that to use same id with CSS and scripts might cause problems in MS IE 4.x for Windows. I have created some advice how to use the id attribute in the page Help for HTML All menu[S].

  3. Id-selectors can be used in XML-documents. Because XML-documents don't need to use any specific DTD-files (or the browser don't always read them), rules like #id {} don't necessary work in XML-documents . Look at also another note[S]. and the first paragraph[S], where I handle attribute selectors.


Pseudo-classes and pseudo-elements



These classifications are created, because any definitions don't match to any particular part of the document tree. That's why is created two classifications, which are not depending on the document tree[S][Pw] at the same way as the element type selector. Pseudo-classes and pseudo-elements are assistance concepts. They behave like class or element type selectors. Because they don't use the class attribute or they don't have corresponding elements, they are in a way fictional. That's why they are called as pseudo-classes and pseudo-elements.

Pseudo-class is an assistant concept, which gives the possibility to classify elements like by using classes, but in some cases relating to outstanding features of the HTML-document (for example if the link has been followed or not).

Pseudo-element is an assistant concept, which is related to the presentational sub-part of the elements (like the first letter or row) resembling the way, how CSS is related with element type selectors.


Simple element type selectors are not tied with any particular attribute inside the element. Pseudo-classes are always bound with real or fictional attributes basically exactly at the same mechanism as an element is bound with the class attribute (remember that class selectors are also bound with certain attributes). Pseudo-classes offer the possibility to express the same element differently in various states.

Especially links can have several dictions in different states and you find pseudo-classes used commonly in link presentations. The existence of link is expressed in HTML-documents with the attribute href and the presentation of states of links has been defined in HTML 3.2 with link and visited attributes for the BODY element. Pseudo-classed :link and :visited gives the possibility to express the states of links without using HTML-attributes.

Link related pseudo-classes are link pseudo-classes :link & :visited and dynamic link pseudo-classes :hover, :active and :focus. Dynamic pseudo-classes affect wider than link pseudo-classes. They concern also other elements than A and they are related only to different states of elements.

W3C: CSS2: 5.11.2 The link pseudo-classes[Pw], 5.11.3 The dynamic pseudo-classes[Pw].

Some examples of the usage of them:

a:link { color: red }
:link {color: red }
/* it is not necessary to define the element A in HTML-documents, because the browser knows anyway, that it is related with links */

Browser-specific notes:

  1. The pseudo-class :link requires, that inside the element A is the attribute href and they should not work without it. Netscape 4.x support and Opera 3.x support :link without the href attribute.

  2. Opera 3.x and Netscape 4.x support only link pseudo-classes (:link, :visited).

  3. MS IE 4.x+ supports :active according to the CSS1 specification (like a link pseudo-class) and limited :hover.

  4. Opera 4.0x support :hover and Opera 5.0x+ in addition :active (both work limited).

  5. The widest implementation is in Mozilla Gecko and Opera 7.x+ browsers, which support also :focus. They support dynamic pseudo-classes also to other elements than to the element A. That's why should always mark, which elements dynamic pseudo-classes concern (for example a:hover). In Opera :hover works widest but :focus works only with form control elements. That is in my mind correct, because A just executes a task but it doesn't stay in the user focus.

I handle the usage of link-related pseudo-classe also in the page 7[S][Pw].

At the same principle works the language pseudo-class, which is depending on language attributes as if the language attributes could create classes (:lang()).

W3C: CSS2: 5.11.4 The language pseudo-class[Pw].

Only CSS2 level pseudo-class selectors is also first-child pseudo-class (:first-child; I handle it closer in the page What is the processing order of CSS[S][Pw] and I handle in the same connection so-called adjacent sibling selector). :first-child use the order of the elements as if the order could create a class specifier. First-child pseudo-class selects the first element at the same type in the same level.

Browser-specific notes:.

  1. The language pseudo-class doesn't work in any browser. Language-dependent rules can be set of Opera and Mozilla Gecko browsers by using attribute selectors. [lang="en"] is for HTML-documents the same as :lang(en). The language condition doesn't however concern XML-documents, because they use the xml:lang attribute. The language pseudo-classes in markup language independent, when for example :lang(en) match with both xml:lang="en" and lang="en" attributes.

  2. :first-child works only in Mozilla Gecko and Opera 7.x+ browsers.

Let's twist on the basis of until now handled selectors a wireframe example from various identifier and selector types, which an individual element can have and which work at least in some browsers.

<A href="some.hml" target="new" class="own" id="another">

That element includes following identifier types, which can be referred in CSS-rules:

  1. * (*{...}) = no special identifier - the browser just identifiers, that the document have elements
  2. A (a {...}) = the element type identifier
  3. own (.own {...}) = the class selector identifier
  4. another = the id selector identifier(#another {...})
  5. class, id, href, target ([class] {...} etc.) = the attribute name as the identifier of attribute selectors = (.own {...})
  6. class="own", id="another", href="some.html", target="new" ([class="own"] {...} etc.) = the name of the attribute + the value of the attribute as identifiers of the attribute selector
  7. a:link, a:visited (a:link {...} etc.) = the identification, if the link is unvisited or visited (the static states of the link)
  8. a:hover, a:active, a:focus (a:hover {...} etc.) = the identification, which is the possible dynamic state of the link


Pseudo-elements don't use any special attributes as their identifiers. They work together with other selectors. If pseudo-elements concern only a certain element type it is not necessary to add to them other selectors. Because in CSS2 :first-letter and :first-line concern any block level elements (according to CSS3 previous mentioned pseudo-element concern any element) it is necessary to define also the the element type, which they concern. It is possible to create fictional tag sequences for pseudo-elements. p:first-letter could be replaced for example with a tag sequence like this: <B><BIG><FONT color="#660033">?</FONT></BIG></B>. It is not however possible to replace :first-line always with a tag sequence, because lines can be broken from several places, if they don't have fixed width.

HTML 3.2 tag sequences are slow to create and they are quite an-flexible. Pseudo-elements are easy way to give to the first letter or row in paragraphs different presentation as in the other parts of the same paragraph. For example the following declaration makes the first letter of all paragraphs 120% bigger as other text in the same paragraph, makes it bold and gives it the color #660033 ([M][S][Pw]):

p:first-letter {font-size:120%; font-weight:bold; color:#660033;} /* the first-letter of paragraphs */
p:first-line {font-size:110%;} /* this definition match to the first line of paragraphs */

Browser-specific notes:.

  1. Opera 3.51-6.x, and MS IE 5.5+ for Windows and MS IE 5.0+ for Mac support them at CSS1 level. Indeed I have found that they don't always work in MS IE. In my tests the strange matter was that MS IE 6.0 for Windows supported them in my CSS-site for LI but not for P elements like MS IE 5.5 for Windows does.

  2. MS IE 5.5 for Windows doesn't support the font-size property for p:first-letter if the paragraph doesn't start with some inline-level element. Changes in the text color might in some situations cause incorrect results. It doesn't support pseudo-elements for heading elements.

  3. If the first letter is an element (for example <p><cite>Alkusana<cite>) Opera 7.x ignores all properties if they are against defined properties for the current element even :first-letter has been marked especially important (I handel importance later).

  4. Opera supports p:first-letter also in situations, where P has defined to behave as an inline level element if it should be applied only for block level elements.

  5. Opera 4.x+ and Mozilla Gecko browsers support also CSS2 level pseudo-elements (:before and :after), which I handle later in this site.

W3C: CSS2: 5.12 Pseudo-elements[Pw].


Other selectors and lists of selectors



Besides them in the CSS2 specifications is mentioned some other selectors. Tables have two special selectors (row What are selectors, classes and id-attributes and column What are selectors, classes and id-attributes). CSS2 specification doesn't count them to the main selector list in the chapter 5, but it handles them only in chapter 17. They don't have any special selector types. They use selectors, which have already mentioned in this page.

In CSS2 special pseudo-classes are also :left and :right. They are used in page breaking (those rules don't work today in in many browsers, but in future they are very useful).

Browser-specific notes:

  1. Mozilla Gecko browsers support huge quantity of proprietary pseudo-classes and pseudo elements (look at. CSS notes 1[S]).

  2. Pseudo-classes :left and :right work in new Opera browsers.

W3C: CSS2: 13 Paged media[Pw], 17 How to set CSS for table elements ([Pw].
Other sites: John Allsop: Kinds of Selector[Pw].


Selectors of CSS2

  • The universal selector
  • The element type selector/ type selector
  • The first-child selector
  • The adjacent sibling selector
  • The class selector
  • The id selector
  • Attribute What are selectors, classes and id-attributes
  • Pseudo-class selectors:
    • Link pseudo-classes:
      • :link
      • :visited
    • Dynamic pseudo-classes:
      • :active
      • :hover
      • :focus
    • The language pseudo-class
    • The first-child pseudo-class
  • Pseudo-element selectors:
    • :fist-letter
    • :fist-line
    • :before
    • :after
  • Special pseudo-classes, which are used in page breaks:
    • :first
    • :left
    • :right

Selectors of CSS3

People have proposed following new generic selectors to CSS3:

  • Structural pseudo-classes:
    • :root
    • :not-first-child
    • :last-child
    • :not-last-child
    • :first-of-type
    • :not-first-of-type
    • :last-of-type
    • :not-last-of-type
    • :only-of-type
    • :not-only-of-type
    • :only-child
    • :not-only-child
    • :nth-child(n) (n=integer)
    • :nth-of-type(n)
  • Other pseudo-classes:
    • :subject (the subject element pseudo-class)
    • :target (the target pseudo-class)
  • Other new selectors:
    • " (for example address"someContent"; the content selector)
    • ~ (for example ul ~ ol; the indirect adjacent combinator)

In additions into CSS3 has proposed new selectors to simulate the functionalities of HTML 4.0 form elements[S].

Browser-specific notes:

  1. Mozilla Gecko browsers support most into CSS3 proposed pseudo-classes and pseudo elements (look at CSS notes 1[S]).

I don't handle them. Next I handle the What is the processing order of CSS.