With the .class selector in CSS, you can select and style one or multiple HTML elements based on a class name in their class attribute.
In contrast to the id attribute, which must be unique and may only be used for one element DOM, the class attribute may be used for multiple DOM elements. If more than one DOM elements share the same class name, the browser will apply the style to all those elements.
Read below for a real-world example of using the .class selector in your CSS style sheets.
How to Use the Class Selector in CSS
Say you have the following HTML document:
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>As you can see from the source code above, there are three items in an unordered list in your HTML document.
You can style all of them using the .class selector in CSS:
.nav-item {
color: red;
}The .class selector in CSS is supported by all major browsers, including, but not limited to, Google Chrome, Firefox, Microsoft Edge, Safari, and Opera. (For detailed information on browser support, refer to the .class selector specs at CanIUse.com.)
Keep learning: The Simple Guide to Complex CSS Selectors
