Previous
Written by: rJTutorial Team | Last Updated:

CSS Class Selector

The class selector is one of the most powerful and frequently used tools in a web developer's toolkit. It allows you to select and style HTML elements based on a specific class attribute value. Unlike the ID selector, which targets a single unique element, the class selector is designed for reusability. You can apply the same class to as many elements as you like across your entire website.

In CSS, the class selector is identified by a period (.) followed immediately by the name of the class. Here is the basic structure:

CSS Syntax

.classname {
  /* Style rules go here */
}
Developer Tip: When naming your classes, use "kebab-case" (lowercase words separated by hyphens, like .main-navigation). It is the standard convention in modern web development and makes your code much easier to read.

For a practical example, imagine you are building a website and want several different buttons to look consistent. Instead of styling each button individually, you create a generic .button class:

CSS

.button {
  background-color: #3498db;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

By applying class="button" to your HTML elements, they will all inherit these styles instantly:

HTML

<button class="button">Click Me</button>
<a href="#" class="button">Download Now</a>
Common Mistake: Beginners often include the period (.) inside the HTML class attribute. Remember: Use the dot in your CSS file to target the class, but leave it out in your HTML.

Correct: <div class="container">
Incorrect: <div class=".container">

You can also combine class selectors with element selectors to be more specific. This is useful when you want a class to behave differently depending on which tag it is attached to. For example, you might want a class named .highlight to look different on a paragraph than it does on a heading:

CSS

p.highlight {
  color: blue;
  font-weight: bold;
}

h2.highlight {
  background-color: yellow;
}
Watch Out: Combining selectors (like p.highlight) increases specificity. This means these rules will override more general class rules, which can sometimes make your CSS harder to debug if your stylesheet grows too complex.

One of the most effective ways to use classes is by assigning multiple classes to a single HTML element. You do this by separating the class names with a space within the same attribute. This allows you to "stack" styles, creating modular and scalable code.

HTML

<div class="card shadow rounded-corners">
  This div uses three different classes to define its appearance.
</div>

In this example, the <div> will receive the styles defined in .card, .shadow, and .rounded-corners simultaneously. This "utility-first" approach is the foundation of modern CSS frameworks like Tailwind CSS.

Best Practice: Give your classes semantic, descriptive names based on their purpose rather than their appearance. For example, use .error-message instead of .red-text. If you decide later that errors should be orange, you won't have to rename your classes in every HTML file.
Previous