Top of Page  Tutorials Home  CSS References

CSS 102b - Additional Selectors

Home Tutorials Reviews Weblog

Featuring: CSS-Cascading Style Sheets - Additional precision Selectors
The previous tutorial covered the basics of using Selectors and the Cascading nature of styles rules. In the case of Cascading rules, HTML tags have default setting that can be added to or completely overridden by class= rules and then overridden a second time by more specific style= rules. In this tutorial, we learn that there are many more additional steps allowed in targeting rules to specific HTML tags.

But first, lets quickly review some useful CSS styling. First each HTML tag can have its default styling amended by users. I do so in theOpenSourcery.com's sitewide stylesheet file, osstyle.css. Here is just one sample:

body, p, table, td, tr {
  background-color:#CCCCCC;
  font-family: Georgia, Times, serif;
  font-size: 12pt; color:#333366;
}

This HTML tag Selector provides for the same styling for the <body> - body, <p> - paragraph, <table> - table, <tr> - table row, and <td> table column tags. As a starting point I want a uniform look for all my Web pages - having a background color of light gray, font size of 12 points, text color of light purple, and font family to be one of Georgia or Times or at least a serif font.

I can and do override these CSS tag stylings with a whole set of CSS class= stylings like .underbold, .embold, .gogreen, .indent and about a dozen total personal CSS class styles. These are also a part of my sitewide osstyle.css stylesheets file. Finally, from time to time I use very specific CSS style= stylings as you have seen on these CSS tutorial pages if you have been using the View | Page Source commands to examine exactly how the CSS tutorial Web pages are laid out.

For theOpenSourcery.com website ,these three styling methods suffice to handle 90-95% of all the CSS stylings I use. However, for Web development work I do elsewhere including modifying WordPress, Joomla, Drupal, Gallery, and other Open Source applications - there are nearly a dozen additional Selector or targeting rules that CSS coders are going to need to know.

Additional CSS Selector

The next set of Selector stylings are presented in roughly their order of importance for understanding CSS. Some of the rules explained here also apply to JavaScript+DOM usage of CSS so they are useful to understand.

Rule 1 - Identity Selectors

#imgborder { margin: 4px;}
Identity selectors are preceded by a hash sign, #, and appear to be defined and work identically the same as .class selectors. And that is true; however there are two key differences. First, instead of the class= option, identity selectors use an id= option within any HTML tag. So the identity CSS rule shown above is then used as follows: <img id="imgborder" src="photoflogo.gif">
Yes,this is the same id=identifier used by JavaScript to identify specific HTML tags. Second, because identity selectors use id=, they have a second and very useful property - style rules with Identity Selectors can be readily changed in JavaScript code(see the tutorial here). This dynamic nature of identity styles is very useful in the new Web 2.0 designs, because it makes for much more efficient page interactions because they can be done within a page without having to go back to the server and ask for a page refresh.

So this JavaScripting of identity selectors implies some restrictions on their usage: apply one identity style to one and only one HTML tag on a Web page. Now most browsers will not enforce this rule - so indeed, you can apply the same id on different HTML tags - and it will work in many browsers but the results can sometimes be quite spurious(the first id= tag is used and no others or sometimes all the id= tags are styled). So be fore-warned - using multiple id= with the same identifier is at the bleeding edge of CSS usage and is actively discouraged.

Rule 2 - Multi-tag Selectors

This is the example used at the top of this page with the <body>, <p>, <table>, <tr>, and <td> all set to the same CSS style. Get used to this in CMS like WordPress or Drupal where .css stylesheet files in which a basic default set of stylings is specified - and then further down in the file very specific, additional setting for each tag are set.

Rule 3 - Descendant Selectors

span strong {background-color: yellow;}
Note very carefully the difference between Multi-tag and Descendant Selectors; Descendant Tags have no commas between them and work as follows: every occurrence of the second tag contained within the first tag will have the specified styling regardless of how often or how deep in the tag tree the tag(s) is(are)found. Thus in the example, because the <strong> tag is contained within a <span> tag, the background color of yellow is added to the <strong>. Note just combinations of two tags can be used for Descendant electors.
Descendant Selectors can be useful in tables or lists when special coloring is to be applied by specific tags as in the example;

Rule 4 - Child Selectors

span > em {font-variants: smallcap ; font-weight:900;}
The Child Selector works like the Descendant Selector with one notable exception - the second tag must be a direct child element - any deeper buried occurrences of the second tag in the first tag's tree will be ignored. Sometimes in use with deeply embedded <ul> <li> lists, Child selectors are appropriate to get styling at the right level.

Rule 5 - Adjacent Sibling Selectors

.underbold + .embold {background-color:#00FFFF}
If two selectors are adjacent to one another, then the second or following one adds the CSS styling rule as you see used in this very sentence. Note, however, the second .embold does not take on the cyan background coloring. I have had occasion to use this rule in complex table and list structures. Notice the selectors are Class selectors and can be any Class or Group selector - this possibility is available to all the Rules but the first. Adjacent Siblings can come in handy making careful distinctions.

Rules 6,7 - Tag with Class Selector, Tag with ID Selector

span.underonly {background-color: cyan;} or span#underonly {background-color: cyan;}

These are the most commonly used combo selectors in CMS and other Styling Templates (again, notice Rule 6 is being used here). Just look at the CSS styling sheets used in Drupal, Gallery, Joomla, Flash, WordPress and dozens of other Web 2.0 applications. Tag with Class and Tag with ID selectors are very heavily used. There are two reasons for this. First, in large templates, it is necessary to avoid clashing styling rules, the specificity of Tag with Class and Tag with ID Selectors allows developers to avoid these errors. Second, the complexity of the stylings often require the nuance of these Rules. As an example just look at the CSS stylings associated with a WordPress Calendar widget or Zimbra spreadsheet.

Summary

This second group of selectors can be thought of as combo selectors where the sequence of usage is important. As noted, these highly selective CSS Rules will be seen in a lot of CMS and other applications where precise styling is required. CSS in Easy Steps by Mike McGrathcover these topics in a great set of summary tables on pages 181-186. CSS: The Definitive Guide 3d Edition by Eric Meyer covers these topics on pages 36-37 and 51-61.