[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]
Table of topic groupsFront page of CSS-guideGuide pages5. What is the processing order of CSS > Matching patterns and contextual selectors (section 2/3)

Matching patterns and contextual selectors

The automatic inheritance principle concerns only necessary or natural relationships. I mean with the natural relationship, that some elements are designed to have many level of nested elements like ordered and unordered lists. Sub-lists inherit CSS-properties from their nearest parents. The automatic inheritance can create only generic guidelines. In order to get better control it is possible to create matching rules. Different selectors create like "patterns" and browsers try to find, where patterns could match. The whole system is pattern matching and I would call individual cases as matching patterns.

Because the meaning of matching patterns is to create rules to individual cases, the CSS1 specification write about contextual What are selectors, classes and id-attributes, which term is not used in the CSS2 specification, because relations are expressed using words descendants, ancestors etc. In my mind is is good to write also about contextual selectors.

Contextual selectors or matching patterns base primary on the bilateral relationships of elements and the relationships are described with the family metaphor. On the background of this method is also the document tree. But otherwise than in the automatic inheritance, pattern matching works like key and keyhole principle. According to the name they take account the context. Certain style is applied only to elements, which are in the right place or they have certain parent element.

In fact a simple universal or element type selector is a matching pattern. In order to separate simple selectors from complex selectors, I mean as matching patterns those kinds of rules, which have at least two conditions. An example of a very simple matching pattern ([M][S][Pw]):

table p {color:green;} /* the latter condition is called as descendant selector; in these kinds of patterns, it is remarkable, that the left round bracket ({) must be in the same row as the pattern, because I have found that patterns don't work if it is another row */

According to this rule, all paragraphs, which are inside tables and then are descendants of the element TABLE, got the property color:green (paragraphs are inside the start-tag and end-tag of the element TD).

I use often these kinds of matching patterns, when I define list-images to unordered lists (UL). If you use grouping[S][Pw], you can create with same declaration exact properties to several level of lists. Below is an example of this kind of solution ([M][S][Pw] - there is also models of the next examples):

ul li, ul li li li { /* in this example I have is defined first and third level lists and they get green list-images (I explain in other connection allowed properties for lists) */
list-style-type: disc;
list-style-image: url(pallo-vihrea.gif); /* vihrea = green */
list-style-position: inside;
margin-left: -10px; }


ul li li { /* according to this rule, second level lists got red list-image; if this list-marker is not defined, it gets the value from previous rule set and it would get green images! */
list-style-type: disc;
list-style-image: url(pallo-punainen.gif); /* punainen = red */
list-style-position: inside;
margin-left: -10px;}

To CSS1 level matching patters can add the class-specifier. In fact a simple element type selector with a class is a matching pattern, because it does have two conditions (element type and class). But these kinds of simple combinations can also add to normal element type selectors creating more complex matching patterns like these ([M][S] - there is also models to the previous examples):

ul.class li {
list-style-type: disc;
list-style-image: url(pallo-vihrea.gif);
list-style-position: inside;
margin-left: -10px;}

table.special td p {color:green;}
/* according to this rule paragraphs inside tables, got green color only, if they are in a table, which have the class special. Note! You don't need to define the class, because in this case the browser doesn't search properties to any table elements but only to paragraphs, which are inside the table! */

Let's looks at also CSS2 level matching patterns, because it is desirable, that browsers would support them. Following scheme describe this matter (OL and UL are list types; LI means individual list-items; I have tried to explain the system with some comments - think it in peace):

 
1) ul li ol li /* match to class="a"; this is a CSS1 level matching pattern and I recommend for some time to use only this kind of patterns */
2) ul li ol > li /* match to class="b" */
3) ul li ol > li:first-child /* match to class="b+" */
4) ul li ol + ul /* match to class="c" */
<UL>
<LI>
<OL>
<LI class="b+"></LI>
/* class="b+" is the first child-element of the element OL (first-child selector together with the :first-child pseudo-class): any property for this element doesn't concern neither next level list elements nor other list items at the same level */
<LI and class="b"></LI> /* class="b" is the second child-element of the element OL (first-child selector): any properties for this level child-elements don't concern next level list elements */
<UL>
<LI class="a"></LI>
/* class="a"; this element gets its properties according to the first rule, even if it is not the first-level child of element OL but second level "grand-child"; If this element have child-elements, they would get their properties from this element */
</UL>
</LI></OL>
<UL class="c"> /* in this case element UL is at the same level being adjacent sibling of OL, which define properties also to the following list-elements */
<LI></LI>
</UL>
</LI>
</UL>

It is also remarkable to remember that the length of the pattern is not the only meaningful factor. When I designed the list test, which I have mentioned, I made an error. I had not found all mutual relationships of different rules. I try to sketch them to you by this example:

li ol+ul {list-style-type: disc; /* according this rule the list-image should be red; It tested it with a preview-version of Netscape 6.x */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

ul li {list-style-type: disc; /* the previous rule don't remain in use, because the shorter pattern UL LI cancels it and redefine list-elements; It just continues at the point, where the latter definitions ends! */
list-style-image: url(./Css/Kuvat/pallo.gif);
list-style-position: outside;}

li ol+ul li {list-style-type: disc; /* in order to get the second rule in use, it must continue with an additional element LI - now Netscape shows the desired image! */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

The most exact matching pattern could be created by combining element and attribute What are selectors, classes and id-attributes[S][Pw].

Browser-specific notes:

  1. MS IE browsers don't support any new CSS2-level patterns.

  2. Only Mozilla Gecko and Opera 7.x browsers support all kinds of in this page mentioned pattern including the :first-child pseudo-class and attribute selectors (you can look a model list[S][Pw] from the error page, how selectors should work).

  3. Opera 3.6x doesn't support rules like .class p {...}..

  4. Opera 3.6x+ support rules like OL > LI {...}.

  5. Opera 5.x-6.x browser support also partially or fully rules like OL + UL {...}.

  6. Opera 4.x+ browser support attribute selectors.


[Top]