CSS: Class Selector

The class selector in CSS is used to select elements based on their class attribute. It’s a way to apply specific styles to elements that share the same class name. The class selector is denoted by a period (.) followed by the class name. Here’s the basic syntax:

CSS

.classname {
  /* CSS declarations */
}

For example, if you have HTML elements with the class button, you can target them with the .button class selector:

CSS

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

This CSS rule will apply the background color, text color, and padding to all elements with the class="button" attribute.

You can also combine class selectors with other types of selectors to increase specificity. For instance, if you only want to style <a> elements with the button class, you would write:

CSS

a.button {
  /* CSS declarations */
}

Multiple classes can be assigned to a single element, and each class will apply its styles independently. For example:

HTML

<div class="class1 class2 class3">...</div>