- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Getting Specific: class and id Selectors
Being able to select and style every paragraph or heading of level 1 is a leap forward over presentational HTML, but it's still quite unsophisticated—after all, what happens if we only want to style specific paragraphs or other elements? Fortunately, CSS has different kinds of selectors that select HTML elements according to specific characteristics. The most commonly used (and also the most overused) of these are the class and id selectors. These selectors select any element with a given class value or id value.
class Selectors
Class selectors, as we've just seen, select every element with a given class value. The syntax is straightforward: just a period followed by the value of the class attribute we want to select. For example, in Chapter 3, we used the class value of chapter for the chapters of our book. We'd select every element with a class value of chapter like this:
.chapter {}
|
This will select, for example, p class="chapter", but also div class="chapter".
We can make class selectors more specific by adding the type of element we want to select (in addition to the class it must have) before the period. For example, p.chapter will only select paragraphs of class chapter. It won't select divs with that class value.
id Selectors
Closely related are id selectors. We saw in the last chapter that ids differ from classes mainly because whereas any number of elements may share the same class value, only one element in any document may have a given id value. We construct an id selector by using the pound (or hash) character (#) followed by the id name. So, if we wanted to select the div with the id volume1chapter1, we'd use this selector:
#volume1chapter1 {}
|
As with the class selector, we can make the id selector more specific, and only select an element of a particular type that also has a given id value by adding the type of element before the # character. For example, div#volume1chapter1 will only select a div with the id value volume1chapter1.
Specificity
Now, what happens if we have the following two CSS statements?
div#volume1chapter1 {
font-weight: bold;
font-size: 1.1em
}
div {
font-size: 1.0em;
color: red
}
|
What font-size will the text of a div with id volume1chapter1 have? There are a few rules that, once we learn them, will allow us to easily determine which properties apply. The technical name for this is specificity—and in short, the more specific statement overrides less specific statements.
It's important to note that whole statements don't override one another. Rather, specific properties are overridden. Let's come back to this point once we've looked at the basic rules of specificity:
- Different types of selectors have different specificities. The rules are technically quite involved, but they're not difficult to remember: id selectors always trump class selectors, and class selectors trump type selectors. As we see more selector types, we'll add them to our specificity rules.
- When they have the same specificity, statements closer to the end of a style sheet have higher precedence than those closer to the top of the style sheet.
Returning to our example, font-weight will be bold, because there's no conflict with the second statement. font-size will be 1.1em, because the id selector trumps the type selector. font-color will be red, as there's no font-color property in the first of the statements, and thus nothing to override this property.