HTML and CSS Reference
In-Depth Information
As you see, this CSS rule adds a quotation mark before the quote. In Chapter 5 you see more uses for the content
property, and if you're thinking “what place does content have in CSS?” I explain that too.
The :after pseudo-element works in the same way:
1. In styles.css, below the blockquote p:before rule set, add the following:
blockquote p:after {
content: “\201D”;
}
2. Save styles.css.
This time, \201D represents a closing quotation mark.
The :before and :after pseudo-elements have huge potential. Because they are nonphysical elements (they're
not a part of the HTML), you can do a lot with them without having to change the structure of your web page.
Sometimes you may want to use a pseudo-element to apply styles to the page but not have to put content inside
the element using the content property. Because pseudo-elements don't work in the absence of the content
property, you can simply use the declaration content: “”; to trick the browser into showing the pseudo-ele-
ment. You'll see an example of this in Chapter 8.
Selector Specificity and the Cascade
Now that you've learned about selectors, you probably realize that they are certainly powerful things, often with
more than one way to select the same element. For example:
header#header > nav[role=”navigation”] {
color: blue;
}
nav {
color: red;
}
These selectors both select the navigation element <nav role=”navigation”>.
The question is: Because these rules select the same element but try to apply different styles to it, which gets used?
Quite simply, the most specific selector wins. Because I've gone over the top with the first selector (I'm just show-
casing my selector superpowers, but in the real world, the less your selectors consist of the better), the browser ap-
plies the first style.
This is known as specificity, and it is calculated in a points system, as follows:
• Count the number of ID selectors in the selector
• Count the number of class selectors, attribute selectors, and pseudo-classes in the selector
Search WWH ::




Custom Search