CSS Selectors

1: Selecting tags to apply CSS properties to

In the previous section, we covered the basic method of choosing a tag to apply stylesheets to, as well as how to create a "class", which will apply to any tag which has a class attribute set to the name of the class. Sometimes however, we may want to specify styles on groups of tags, or set them to apply to a tag only when it is inside of another tag - below is a list of these "selectors", and their meanings. Bear in mind that the use of "p" and "b" tags here is completely arbitrary, and these tags could easily be replaced in the example with any other tag in XHTML.

A complete index of all CSS selectors in the current specifications is available here, however as with everything in CSS, not all browsers will have implemented all of the specification. Below, we will discuss the most common and universally implemented of the selectors, and how they work. For the purposes of showing these examples, we will use the imaginary tags E and X - note that they can be replaced in the examples with any valid and legal combination of XHTML tags.

1.1: What is the point of "E,X"?

Placing a comma (,) between two tag names lets you specify identical style attributes on both of them at the same time - if you have a number of tags you want to all follow the same styles, this can be a helpful shortcut, and can make your stylesheet file much shorter and easier to read. For example, the following stylesheet code:

In the above code, we set exactly the same set of properties and values on each of h1, h2, h3, and h4 - the comma selector can be used here to make our CSS code much shorter, as the following block of code does exactly the same thing as the longer code above:

An additional benefit of specifying all of these tags together is that changes to the group now only need to be made in one place, so the chance of accidentally missing one change is eliminated. It should be noted that in the above example, text inside of h1 through h4 tags will still appear different from eachother, as the main property provided by the hX tags is related to the size of the font, which is not being altered. Even when applying properties to a group of tags all at once, the original properties of that tag will only change if they are explicitly mentioned.

1.2: "E>X" vs. "E X"

In the list above, the last two items "E>X" and "E X" are very similar - they depend on an XML concept regarding placement of tags - any tag immediately inside of another is considered a child of the other tag - in the first case, "E>X" is looking for any "X" tag which is a child of an "E" tag. In the second, "E X" is less specific, and will apply to any "X" tag inside of an "E" tag, whether it is a child, grand-child (ie: child of a child of the tag) or further. An example of this is in the code block below using paragraph tags:

The immediate children of this "p" tag are easy to spot - the first "b" tag, the first "i" tag, and the "em" tag. The easiest way of determining what tags are children of what other tags is by drawing circles around each tag in your code, with the circle intersecting only the tag itself. If your code is written in proper XHTML, none of your circles should overlap. Now any circle immediately inside of another circle represents a tag which is a child of the circle it is inside of. Thus, the code above would look like this:

In the image above, you can see that each of the tags with the yellow circles is a child of the main "p" tag. The green tags are each a child of the yellow one which surrounds them, and the blue tag is the child of the green tag around it. In the above XHTML, "p>b" would select only one tag - the first "b" tag in the list, as it is the only child of the "p" tag which is also a "b" tag. "p b" however, would select all three of the "b" tags in this code, as it does not care if the tag is a child, grandchild, or even further from the "p" tag, just as long as it is inside of it.

2: Classes

Classes are used to take a set of stylesheet properties, give them a name, and apply them to any arbitrary XHTML tag using the class attribute. Classes are given a much higher priority than the normal selectors covered in part 1, so applying a class to a tag will override any conflicting styles applied to the tag. Thus, if generally for all h2 tags, you have set the color: property to green, but you create a class called redtext (which sets the color: to red,) and apply it to an h2 tag, the result will be a red h2 tag - any other properties assigned to the h2 tag which don't conflict with the redtext class will be unchanged, but where there is a conflict, the class will always win. (Only properties assigned with the style= attribute have higher priority than the class properties.)

There are a few rules you should always make sure to follow when choosing the name for a new class:

• You should never use the name of an actual XHTML tag for your class.
• You should stick to naming your class with just letters and numbers for simplicity - spaces and math characters will cause problems.
• Class names are case sensitive - you can create them in either upper or lower case letters, but you must stick to the case you used when creating the class whenever you use it.
• Give your class a name which is meaningfull, so that you will be easily able to remember it, and what it is for when you need to use it.

Not only can you create these classes and use them to assign properties to arbitrary tags, you can also make your class behave differently for different tags, or to exist on only one tag, by specifying it along with a tag name, like this:

In the above example, we first create a class called redtext, which will cause any tag it is used on to have it's text color set to red. This includes any and all tags that may be mentioned by the rest of the stylesheet.

Next, we've added a second version of the class - p.redtext - the "p" at the start means that in this case, the properties will only be applied to p tags with a class="redtext" attribute set. In this case, both the first class, AND the p tag specific one will be applied, causing the class to make it's p tags red, AND in the arial font. As there is no conflict between the two versions of the class, they will both be used on p tags, and only the first will be used on normal tags. Note that there are no spaces between the name of the tag and the starting dot of the class name. Adding a space in between the two would change the meaning of the selector to something we'll cover later.

The third line in the example above applies to a tags, and it sets a different value for the same property which is set in the original version of our class - thus, when an a tag recieves the class="redtext" attribute, it will make the text color pink instead of red like other tags. Note that the second class will not be applied to a tags, as it only applies to p tags.

3: ID Attributes

In XHTML, there is a special attribute 'id', which can be used to uniquely identify a specific tag in a file, to apply Javascript and Style Sheet properties to it. The rules for the ID attribute are as follows:

1. You must use a safe name (ie: no spaces, punctuation characters, or other symbols. Only letters and numbers are allowed.)
2. The given id value must be unique within each .html file. It can be used again in other .html files, but only once per id value in each file.

Thus, to identify one special tag in each file which we want to apply special style properties to (ie: a div tag containing a floating menu), we could add the XHTML attribute id="menu" to it, and then be able to use Javascript and CSS on that tag to create our floating menu.

The selector to use for this is very much like the class selector above, but instead of a ., you use a # character. Thus:

4: Pseudo-classes

In some cases, there are tags or situations in XHTML where we do not want the exact same appearance for the same tag under all conditions. The primary example of this is in the case of the a tag, which is supposed to show different colours for links which have been visited or not. With what has been covered so far, we can set a colour for the a tag in general, but it's behaviour in different situations is not covered by that alone, as we can only set one colour/font/size/... for the tag. While we can set the colour for visited/unvisited (and active) links with the body tag's link, vlink, and alink attributes, this defeats the purpose of using a stylesheet to control the settings of your website from a single location. To allow you to set these properties based on the state of a tag, CSS includes yet another type of selector, called a pseudo class.

While all versions of CSS define numerous pseudo classes for different circumstances, some of them have problems with support across different browsers. The most support for pseudo classes is as they apply to the a tag, though there are also pseudo classes which apply to other tags and situations. Three of these pseudo-classes are replacements for the link, alink, and vlink attributes of the body tag in HTML 4.

In most of these cases, the pseudo-class will be applied to an a tag in much the same way that a regular class would be - the :hover pseudo class can be applied to nearly any XHTML tag or class, and will work in most current browsers. In addition to allowing greater flexibility over the appearance of your links, these pseudo-classes can also be applied to different classes, thus allowing your page to have two or more different sets of links behaving in different manners at the same time. For example:

The above stylesheet code would allow you to have two different varieties of link tag in your page - one for regular links embedded in the HTML code of your file, and another specific to the menu you used, just by putting class="menu" on each of the a tags in the menu, like this:

In the above example, most of the links would use the "menu" group, except the last, "boring link", which would use the normal CSS values you defined for the a tag.

5: Combining Selectors

The menu described above works by combining both the class and pseudo-class selectors - this can be done with any group of selectors, to describe the contents of your file. A more convenient method of doing the menu above for example, would require putting all of your menu links into a div tag for your menu (or a td table cell, or any other tag really), and applying an id="menu" attribute to it, then combining the selectors for the pseudo-class, the selector for ID attributes, and the "blank space" selector for "tag X contained inside of tag E" described in the first section of this tutorial. The result would look like this:

In the above example, the #menu refers to the div tag with id="menu" on it, and the a:link (and others) placed after a space mean "apply these properties to ALL a:link selected tags that are anywhere inside of the tag selected by #menu". This is the reason why, when applying a class or pseudo-class to a specific type of tag, you want to make sure there is no space between the tag name and the ".", as the space being present will change the selector to mean "Any tag that has the class redtext applied to it that is inside of a p tag", instead of "any p tag that has the class="redtext" attribute on it.