- The Rules of Style
- Types of Selectors
- Styles in Context
- Styles for Special Cases
This chapter is from the book
This chapter is from the book
This chapter is from the book
Styles in Context
When speaking, context can radically alter the meaning of a statement. Take the phrase:
“I’m going to kill you!”
If someone said that while whacking you on the head with a pillow, it would mean something very different than if they said it while whacking you on the head with a baseball bat. The context in which those words are spoken is the difference between the phrase being a playful euphemism or a menacing threat.
Likewise, in CSS, the context of a particular element can determine its style. For example, if you want headers in a sidebar to look different from headers in the main body, you can easily give each a different look by defining how the level 1 header tag should look in the body and a different rule for how it should look in a sidebar.
Headline Variety
)
Styles Based on Where Something Is
The most frequent way to use context is to style an element based on the HTML tags, classes, or IDs of its parent elements. Remember that an element is created anytime you put HTML tags around content. You can nest one element inside of another, and the surrounding tags are called parent elements. We can then write our CSS to style a tag based on the HTML tags, classes, or IDs that the element is within to style the descendent selectors.
A Simple Example of Descendent Selector Context
For example, you might style the text color <cite> tag—which is used to indicate that a block of text is a citation, such as a book title like Through the Looking-Glass—green, but make it red if it’s in a level 1 header. To do this, we list each of the selectors that define the context, with a space in between:
A citation’s text color is green.
cite { color: green; }
If a citation is in a level 1 header, its text color is red.
h1 cite { color: red; }
)
A More Complex Example of Descendent Selector Context
Context is not just for HTML tags. You can get as specific as you want about the context using classes and IDs as well. For example, we might create a rule for a <cite> tag if it’s in the introduction of the article section of the page:
If a citation is in a paragraph with the intro class that is within the article ID, its text color is red.
#article p.intro cite { color: red; }
You can create contexts as specific as you like, but keep in mind it is always the last selector in the list that gets the actual styling.
The above CSS would apply its styles to the following content:
<div id=“article”><p class=“intro”><cite>
Through the Looking-Glass
</cite></p></div>
But not to:
<div id=“article”><h1><cite>
Through the Looking-Glass
</cite></h1><div>
Because it doesn’t have the intro class in a paragraph.
)
Styles for Children
Styles can also discriminate between an element that is a direct child of its parent or an element that is a “grandchild,” allowing you to style child selectors. For example, you can create a rule to make the text red only when it’s the direct child (not a grandchild) of a paragraph tag.
If the emphasis tag is in a paragraph, and does not have any other parent tags, its color is red.
p>em { color: red; }
If we applied these two rules to the following HTML code:
<p><em>the white kitten</em><p>
Here, “the white kitten” will be red because the emphasis tag is a directly within the paragraph. However, if we applied it to this HTML code:
<p><strong><em>the old cat</em></strong></p>
In this case, “old cat” would not get the red styling because the strong text is the emphasized text’s direct parent, not the paragraph.
)
Styles for Siblings
If elements are next to each other (not nested inside of each other), they are called adjacent or sibling selectors. You can set a style based on an element’s sibling. For example, let’s say you want any citation that’s next to emphasized text to be red:
If a citation is next to emphasized text, its text color is red.
em+cite { color: red; }
If we applied this to the following HTML:
<em>Quotes</em> from <cite>Through the Looking-Glass</cite>
The words “Thorough the Looking-Glass” would be red, because the <em> and <cite> tags are next to each other (despite the intervening text).
However, with the following HTML:
<em>Quotes</em> <strong>from</strong>
<cite>Through the Looking-Glass</cite>
The words “Through the Looking-Glass” would not get the red styling because the <strong> tag is in the way.
)