Class Selectors

Class Selectors

Class selectors can be used to select any HTML element that has been given a class attribute.

In the HTML sample shown in Listing 3.1, there are two HTML elements with class attributes<p class="intro"> and <a href="#" class="intro">.

For example, to select all instances of the intro class, the .intro selector is used as shown in Listing 3.3.

Listing 3.3. CSS Code Containing Styling for the .intro Class

.intro
{
     font-weight: bold;
}

You also can select specific instances of a class by combining type and class selectors. For example, you might want to select the <p class="intro"> and the <a href="#" class="intro"> separately. This is achieved using p.intro and a.intro as shown in Listing 3.4.

Listing 3.4. CSS Code Containing Two Different Stylings of the .intro Class

p.intro
{
    color: red;
}

a.intro
{
    color: green;
}