HTML and CSS Reference
In-Depth Information
Chapter 3
Class and id selectors
Class and id selectors define rules that apply to only a selected set of HTML elements.
They allow you to identify individual elements, or groups of elements, without having to
style all instances of the element type.
Class selector
The class selector is used to identify a group of elements. It is recognized by the period
sign (
.
), followed by a class name. The class can be a general class that can be applied to
any element.
/* Selects any element with class name myclass */
.myclass {}
The selector can also be a specific class that can be applied to only one type of element.
The specific class is defined by declaring the element's name before the period sign.
/* Selects any <p> element with class name myclass */
p.myclass {}
Specific classes make it easier to identify where the class is used; general classes
allow for greater code reuse.
Class example
For example, suppose that the text inside of some elements should be colored, but not for
all instances of the elements. The first step then is to add a general class rule with a color
property specified.
.info { color: green; }
This rule says that any element whose
class
attribute has the value of
"info"
will
have this style.
