CIT041X Index > Selectors

Selectors

Most of the time, simply specifying an element name as a selector is sufficient. Consider this sample document, associated with the following style sheet:

document {
    display: block;
    margin: 0.25em;
    font-size: 12pt;
}

para {
    display:block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-indent: 1em;
}
heading {
    font-size: 125%;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

bold {
    font-weight: bold;
}

ital {
    font-style: italic;
}

When you apply the stylesheet, you get this result.

Context-sensitive Selectors

Notice the problem: headings are bold, and the word “chmod” in the heading is also bold, so it doesn’t show up as distinct from the rest of the document. What we need to do is say that <bold> should show up as bold when it’s not in a heading, but inside a heading, it should be red, so that it will stand out.

We add this to the stylesheet:

heading bold {
    color: red;
}

The element names are separated by a space, not a comma! When separated by a space, this means that a <bold> element nested at any depth within a <heading> element will be red. Here is the result.

When we say “any depth,” we mean it. If we change the heading to this:

<heading>The <ital><bold>chmod</bold></ital> command</heading>

The “chmod” will still show up in red, because it is nested inside the <heading>. What if you want to make something a different style only if it is a direct descendant of another element. For example, in this XML:

<heading>The <bold>rich</bold> and <ital><bold>famous</bold></ital></heading>

Apply this CSS:

heading bold {
    color: red;
}

heading > bold {
    text-decoration: underline;
}

As you will see when you try this, the word “rich” will show up underlined in red, since it is both nested within the <heading> and its immediate descendant; the word “famous” will only be red, since it is not an immediate descendant of <heading> (See it in action)

Typographically Correct Paragraphs

If you look at a professionally typeset book, you will see that the first paragraph after a heading is not indented, but subsequent paragraphs are. We would like to emulate that behavior in our stylesheet, which we do using the plus sign, which stands for “first sibling”. (See the result)

heading + para {
    text-indent: 0;
}

Don’t Go Nuts!

Now that you have learned about context-sensitive selectors, you will be tempted to apply them absolutely everywhere, even if they aren’t needed. For example, a selector document para would not be helpful; all the <para> elements are in the <document> to begin with. When people learn about the wildcard selector *, which matches any element at all, they start writing selectors like * para or * bold. These just use up enormous amounts of computing power for no different effect than a simple para or bold selector.

Using Attributes

It is possible to make a style dependent upon whether an element has a specific attribute, or whether it has a specific attribute with a specific value. Let’s say you wanted all paragraphs with an align attribute to have a light yellow background. Just put the attribute name in square brackets after the element name. (See the result)

para[align] {
    background-color: #ffc;
}

If you want a specific attribute, you put it in the square brackets. Say that we want centered paragraphs to have a border and some padding, and right-aligned paragraphs to have smaller text. We accomplish this by adding the following CSS: (See the result)

para[align="left"] {
    text-align: left;
}

para[align="right"] {
    text-align: right;
    font-size: 80%;
}

para[align="center"]{
    text-align: center;
    border: 1px solid black;
    padding: 0.25em;
}