CSS:Getting Started:Selectors
From MDC
This page explains how you can apply styles selectively, and how different kinds of selector have different priorities.
You add some attributes to the tags in your sample document, and you use these attributes in your sample stylesheet.
[edit] Information: Selectors
CSS has its own terminology to describe the CSS language. Previously in this tutorial, you created a line in your stylesheet like this:
strong {color: red;}
In CSS terminology, this entire line is a rule. This rule starts with strong, which is a selector. It selects which elements in the DOM the rule will apply to.
| The part inside the curly braces is the declaration.
The keyword The semicolon after the property-value pair separates it from other property-value pairs in the same declaration. This tutorial refers to a selector like |
This page of the tutorial explains more about the selectors that you can use in CSS rules.
In addition to tag names, you can use attribute values in selectors. This allows your rules to be more specific.
Two attributes have special status for CSS. They are class and id.
Use the class attribute in a tag to assign the tag to a named class. It is up to you what name you choose for the class.
In your stylesheet, type a full stop (period) before the class name when you use it in a selector.
Use the id attribute in a tag to assign an id to the tag. It is up to you what name you choose for the id. The id name must be unique in the document.
In your stylesheet, type a number sign (hash) before the id when you use it in a selector.
This HTML tag has both a class attribute and an id attribute:
<P class="key" id="principal"> The id, In a CSS stylesheet, this rule makes all the elements in the class
.key {color: green;}
This rule makes the one element with the id
#principal {font-weight: bolder;}
|
If more than one rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector. An id selector is more specific than a class selector, which in turn is more specific than a tag selector.
| You can also combine selectors, making a more specific selector.
For example, the selector You are not restricted to the two special attrbutes, A later page of this tutorial (Tables) has information about complex selectors based on relationships. For complete information on selectors, see Selectors in the CSS Specification. |
If the stylesheet has conflicting rules and they are equally specific, then CSS gives priority to the rule that is later in the stylesheet.
When you have a problem with conflicting rules, try to resolve it by making one of the rules more specific, so that it has priority. If you cannot do that, try moving one of the rules nearer the end of the stylesheet so that it has priority.
[edit] Action: Using class and id selectors
Edit your HTML file, and duplicate the paragraph by copying and pasting it. Then add id and class attributes to the first copy, and an id to the second copy as shown below. Alternatively, copy and paste the entire file again:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Sample document</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<p id="first">
<strong class="carrot">C</strong>ascading
<strong class="spinach">S</strong>tyle
<strong class="spinach">S</strong>heets
</P>
<P id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
Now edit your CSS file. Replace the entire contents with:
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
Refresh your browser to see the result:
| Cascading Style Sheets |
| Cascading Style Sheets |
You can try rearranging the lines in your CSS file to show that the order has no effect.
The class selectors .carrot and .spinach have priority over the tag selector strong.
The id selector #first has priority over the class and tag selectors.
Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue:
Now change the rule you have just added (without changing anything else), to make the first paragraph blue too:
|
[edit] What next?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
Your sample stylesheet is starting to look dense and complicated. The next page describes ways to make CSS easier to read: Readable CSS