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. A general class is defined here, which 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. Such a 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 a class is used, whereas general classes can allow for greater code reuse.
Class Example
Suppose that the text inside of some elements should be colored, but not for all instances of those 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.
<p class="info">Green</p>
If a class rule will be used by only a single element type, it can instead be defined as a specific class. Doing so makes it easier for anyone reading the style sheet to understand where the style is used.
p.warn { color: orange; }
A specific class rule is applied to the document in the same way as a general class rule, but it will style elements of only the specified type.
<p class="warn">Orange</p>
More than one class rule can be applied to a single element by separating each class name with a space. This makes class rules very versatile.
<p class="style1 style2"></p>
ID Selector
The id selector is used to identify a single unique element. It works much like the class selector, but uses a pound sign (#) instead of a period and the id attribute instead of the class attribute. Like the class attribute, id is a generic attribute that can be applied to virtually any HTML element. It provides a unique identifier for an element within a document.
/* Selects the element with id set to myid */
#myid {}
Like class selectors, id selectors can be qualified with an element. However, because there should be only one element with a given id, this additional qualifier is considered unnecessary.
/* Selects the <p> element with id set to myid */
p#myid {}
ID Example
The following id selector will match the one and only element in the document whose id attribute is set to that id. This selector can therefore be used instead of the class selector if a style is intended to be applied to only a single element instance.
#err { color: red; }
An id rule is applied to an element using the id attribute. Because the id attribute has to be unique, each id selector can be used on only one element per web page. Therefore, the id selector implicitly specifies that the style is used only once on any one page.
<p id="err">Red</p>
Class and ID Guidelines
In many instances, using classes is the preferred method of selecting elements in CSS because classes are both flexible and reusable. Ids, on the other hand, are often used for structural elements of a site, such as #content and #footer, to highlight that those elements serve a unique role.