6.3 Working with Selectors

A style is not very useful if you cannot associate it with various elements in the HTML document. This is done with a selector, which is the first part of each formatting rule. There are two ways to connect elements with rules: including the name of the element and including the value of a class or id attribute that an element has.

To associate a rule with all HTML elements of a specific name, simply use the tag name. For example, the following rule would apply to all elements in a document:

p {rule details}

To associate a rule with all elements that have a specific class attribute, place a period before the attribute value:

.value {rule details}

For example, the rule

.emphasize {rule details}

would apply only to elements where the class=”emphasize” attribute is present, such as either of these:

<p class='emphasize'>This text will have the rule applied.</p>
<td class='emphasize'>This cell will have the rule applied.</td>

You can combine these two techniques to create a selector that will apply only to HTML elements with a certain name and a certain value for the class attribute.

Here’s how:

ElementName.ClassValue {rule details}

Here’s an example:

p.emphasize {rule details}

This would apply to the following elements:

<p class='emphasize'>This text will have rule applied.</p>

If would not apply to either of these elements:

<p>This text will not have the rule applied.</p>
<td class='emphasize'>This cell will not have rule applied</td>