Ken Ward's Cascading
Style Sheets Tutorial

 

[Main Site Page: Freeing the Mind]
[Cascading Style Sheets: Contents]
[Previous: Bullets and Lists]
[This Page: More on Selectors]
[Next:Scrollbars ]

More on Selectors

We already know some types of selectors. We have learned about HTML element selectors, although we didn't call them that. These are selectors which simply consist of the HTML element and its declarations. For example:

BODY {color: #ff0000};

And we have learned about class selectors. These are ones where we define a class and write in the document:

<p class="101">

for example.

Contextual Selectors

Yet there are other selectors - even more useful ones. For example, we have contextual selectors. These define selectors within selectors. Suppose we want bulleted lists to be red when in a table cell. We can do this with:

TD UL {color: #ff0000};

This makes the bulleted lists red, but only in a table cell!

---

A good use for contextual selectors is to override the local font settings. So, if we wanted the text to be white in a table cell, we would use:

TD FONT {color: #ffffff}

This would overrride the local font settings in the table cells. We might want to do this when applying style sheets to old documents.

---

Consider the following:

• animals
  • dogs
  • cats
  • rats
    • Ratty
    • Jimmy Rat
    • Mr Rat
• plants
• other

The code in the page for this is simply unordered lists, with no sign of images at all!:

<ul>

<li>animals

<ul><!-- level one list-->

<li>dogs </li>

<li>cats </li>

<li>rats

<ul><!-- level 2 list-->

<li>Ratty </li>

<li>Jimmy Rat </li>

<li>Mr Rat </li>

</ul><!-- end of level 2-->

</li>

</ul><!-- end of level 1 -->

</li>

<li>plants </li>

<li>other </li>

</ul>

The reason why the images appear is due to the style sheet which contains the following rules:

ul { list-style-image: url(red.gif); list-style-position: outside }

li ul {list-style-image: url("yellow.gif"); }

li li ul {list-style-image: url("red2.gif"); }

An ordinary UL uses the image 'red.gif'. An UL in a LI uses 'yellow.gif'. And, finally, an UL in a LI in a LI uses 'red2.gif' (even though "yellow.gif" is not yellow, but is:"", and red2 is ""; "red.gif" is "", which is, currently, still red :-).

Similarly, we can use nested ordered list:

1. animals
   1. big
   2. small
      1. fairly small
      2. smallish
      3. miniscule
2. plants
3. other

Although the type is nowhere specified in this document, it is specified in the Style Sheet:

OL { list-style:decimal ; }

LI OL { list-style:lower-alpha; }

LI LI OL { list-style:lower-roman; }

So, these are contextual selectors. Another kind of selector is  ...

Pseudo class selectors

Now aren't you pleased you have already learned about these? Do you remember anchors? Well these are examples of pseudo selectors.

Pseudo element selectors

Selectors such as:

P:first-letter {color: #8000ff;
font-size: 130%}

and

P:first-line {color: #8000ff;
font-size: 130%}

affect the first letter (drop capital letter effect) or the first line of the block selector - in this case, the paragraph, P. They don't work on Internet Explorer.

 

Contents