CSS Class Selector Detail

Class selectors allow styles to be specified in a way that is independent of the document elements.

CSS Class Selector

Class selectors allow styles to be specified in a way that is independent of the document elements.

This selector can be used alone or combined with other elements.

Tip:These selectors can only be used after the document is properly marked, so it usually requires some planning and conceptualization to use these two selectors.

The most common method to apply styles without considering the specific design of the elements is to use class selectors.

Modify HTML code

Before using the class selector, it is necessary to modify the specific document markup so that the class selector can work properly.

To associate the style of the class selector with the element, it is necessary to specify a suitable value for the class. Please see the following HTML code:

<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>

In the above code, the class of the two elements is specified as important: the first title (h1 element) and the second paragraph (p element).

Syntax

Then we use the following syntax to apply styles to these categorized elements, that is, a period (.) before the class name, followed by combining with the wildcard selector:

*.important {color:red;}

If you only want to select elements with the same class name, you can ignore the wildcard selector in the class selector, which will have no negative effects:

.important {color:red;}

Try It Yourself

Combined with Element Selectors

Class selectors can be combined with element selectors.

For example, you may want only paragraphs to be displayed in red text:

p.important {color:red;}

The selector now matches all p elements with the class attribute containing 'important', but does not match any other type of element, regardless of whether it has this class attribute. The selector 'p.important' is interpreted as: 'All paragraphs with the class attribute value of 'important''. Because the h1 element is not a paragraph, the selector does not match it, so the h1 element will not become red text.

If you really want to specify a different style for the h1 element, you can use the selector h1.important:

p.important {color:red;}
h1.important {color:blue;}

Try It Yourself

CSS Multi-class Selectors

In the previous section, we dealt with the case where a class value contains a single word. In HTML, a class value may contain a list of words separated by spaces. For example, if you want to mark a specific element as both important (important) and warning (warning), you can write:

<p class="important warning">
This paragraph is a very important warning.
</p>

The order of these two words is not important, it can also be written as 'warning important'.

We assume that all elements with the class 'important' are bold, and all elements with the class 'warning' are italic, and all elements with both 'important' and 'warning' have a silver background. It can be written as:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Try It Yourself

By linking two class selectors together, it is only possible to selectSimultaneously containing these class nameselements (the order of class names is not limited).

If a multi-class selector contains a class name that is not in the class name list, the match will fail. Please see the following rules:

.important.urgent {background:silver;}

As expected, this selector will only match p elements that contain the words 'important' and 'urgent' in the class attribute. Therefore, if a p element only has the words 'important' and 'warning' in its class attribute, it will not match. However, it can match the following elements:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

Try It Yourself

Important Note:Before IE7, different platforms' Internet Explorer cannot correctly handle multiple class selectors.