Combining Selectors

Now that you're familiar with how to use selectors in CSS rule sets including type selectors (HTML element names), class selectors and id selectors, we can move on to learning about other kinds of selectors to open up more complex and useful targetting possibilities.

Here we'll introduce a couple of advanced methods of using CSS selectors here which will help you:

1. Apply style declarations to selectors contained inside other selectors
2. Apply the same style declarations to a group of selectors

Both of the above involve using multiple selectors in the same rule sets which will —among other things— help you to economise your CSS and HTML coding.

We'll start with...

Descendant Selectors

Okay so let's say you want to have a site menu running across the top of your web page and you would like all the hyperlinks in the site menu (and only the hyperlinks) colored green. One way of doing it would be to create a class called, say, 'SiteMenu' and then define it in an external stylesheet:


Then we'd insert the class="SiteMenu" attribute/value pair in each anchor tag used in the menu like this:


Simple enough? Well not really. It could be simpler. You might have noticed that I wrapped all those menu hyperlinks in DIV element. We can actually use that DIV element to apply CSS to any or all elements contained inside of it.

The way it works is any HTML elements contained directly inside this DIV are called child elements while any elements contained inside the DIV's child elements are called the DIV's grandchild elements (and so on and so forth). Hence all elements contained inside the DIV element are said to be its descendants and we can use CSS to apply styles to all those descendants using descendant selectors.

A descendant selector is written by declaring the 'parent' selector followed by the descendant to which the style declarations are applied. The two are separated only by a space (mandatory).

Let's rewrite our site menu using a descendant selector. First the ruleset in the stylesheet:


And next, the HTML code that renders the menu itself:


Here you'll notice that the class="SiteMenu" attribute/value pair is only declared once in the DIV 'wrapper' element. Essentially what the code in the stylesheet is saying is that any A elements that are contained in (descendants of) any element that is using the SiteMenu class will be colored green. Here the DIV element is using the SiteMenu class so the text in all its descendant A elements will be colored green. There is now no need to repeat the SiteMenu class in every individual anchor tag as in Example 1.

You are not confined to using just two selectors to create descendant selectors nor are you obliged to use any classes (or IDs). You can, if you like, just use a string of element names to create a complex descendant selector that walks down an element's 'family tree' to target specific elements anywhere in its heirarchy.

For example, the following CSS code:


...will target all tables contained within other tables contained within other tables contained within other tables. Simply put, this will target all tables nested inside other tables four levels deep.

The following illustrates some HTML code applicable to this situation:


Be advised that most web standards gurus would have a litter of kittens over HTML code written like this. But it does exist (e.g., the default MySpace template uses tables nested six levels deep) and descendant selectors can be used to target elements in this manner.

Your typical usage of descendant selectors, however, will probably be much less insane such as creating a class to define a table's borders and then using the same class in various descendant selectors to style the table's cells and to style hyperlinks in the table's cells.

Here's an example stylesheet:


And here's the applicable HTML coding:


The above example represents an efficient use of CSS by defining just a single class for the table and then using appropriate descendant selectors to target other elements inside the table. The .SiteMenu2 class selector is used to set the table border color black and at 1 pixel wide. The two following descendant selectors are used to set the width of all the table cells at 100 pixels and to set the color of all hyperlinks in each table cell green.

Grouping Selectors

This one's a lot easier. Basically, to avoid having to rewrite the same style declarations for a number different selectors, you can just group all the selectors in a comma-separated list and use it in one rule set. Let's say we wanted all paragraphs, DIVs and blockquotes in our web page to be displayed using Tahoma font with a 14 pixel font size.

We could —if we wanted to do it the hard way— write separate rule sets for each like this:


BUT...

It would be a lot easier if we just put the p, div, and blockquote selectors in a comma-separated list thus defining it as a group and then just apply the style declarations to all of them at once like this:


Along with type selectors, you can also group class selectors, id selectors and even descendant selectors like this:


The above rule set applies styles to following:

1. All elements using the MainText class
2. All elements using the Heading1 ID
3. All paragraphs
4. All blockquotes contained inside paragraphs

Just remember to use commas to separate the list of selectors you wish to group together (the space after each comma is optional).


*   *   *

And that's a wrap on basic CSS. Now all you need is a handy list of CSS properties and values to help you remember what does what and what HTML elements they can be applied to...