What is the representation of css class selector?

CSS Class Selector

Class selector allows styles to be specified in a way that is independent of document elements . This selector can be used alone or in combination with other elements.

Tip: These selectors can only be used after the document has been properly marked up, so using either selector usually requires some thought and planning.

To apply styles regardless of the specific design element, the most common way is to use a class selector.

In CSS, the class selector is displayed with a period, for example:

.center {text-align: center}

In the above example, all HTML elements with the center class are centered.

In the following HTML code, both h1 and p elements have the center class. This means that both will obey the rules in the ".center" selector.

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

Note: Numbers cannot be used as the first character of the class name! It won't work in Mozilla or Firefox.

Combined with other selectors

Class selectors can be used in conjunction with other selectors, such as: element selectors.

For example, you might want only paragraphs to appear in red text:

p.center{color:red;}

The selector will now match all p elements whose class attribute contains center, but not elements of any other type, regardless of Whether there is this class attribute. The selector p.center is interpreted as: "all paragraphs whose class attribute value is center". Because the h1 element is not a paragraph, this rule's selector does not match it, so the h1 element does not turn into red text.

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

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

The above is the detailed content of What is the representation of css class selector?. For more information, please follow other related articles on the PHP Chinese website!