CSS class selector

class selector allows styling 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 if the document is marked up appropriately, so using them usually requires some forethought and planning.

The most common way to apply styles regardless of specific design elements is to use class selectors.

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

.center {text-align: center}

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

In the HTML code below, both h1 and p elements have center class. This means that both will respect the rules in the “.center” selector.

 This heading will be center-aligned
 
 

 This paragraph will also be center-aligned.
 

Note: The first character of the class name cannot use numbers! It doesn’t work in Mozilla or Firefox.

Combined with other selectors

Class selectors can be used in conjunction with other selectors, for example: element selectors.

For example, you may want only paragraphs to appear as 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, whether or not the class attribute is present. The selector p.center is interpreted as: “all paragraphs whose class attribute value is center”. Because the h1 element is not a paragraph, the selector for this rule 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 css class selector used to represent? For more information, please pay attention to other related articles on 1024programmer.com!