The .class Selector in CSS, Explained

Learn everything you need to know about the .class selector in Cascading Style Sheets (CSS).

Published Categorized as CSS

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

By Dim Nikov

Content creator with marketing and web development skills to pay the bills.

Leave a comment

Your email address will not be published. Required fields are marked *