HTML・CSS Writing 2022

Class Selector-Introduction to CSS [CSS3 compatible]

The class selector is for specifying the class of the element to which the style sheet (CSS) applies.

The class selector starts with "." And specifies the class name of the element you want to apply. The ".menu" part is the class selector.

.menu {
  color: red;
}

Let's use the class selector.

<style>
.menu {
  color: red;
}
</style>

<div class = "menu">
  Grilled meat
</div>

Combination of class selector and element selector

You can also combine a class selector with a element selector.

<style>
  div.menu {
    color: red;
  }
</style>

<div class = "menu">
  Grilled meat
</div>

Should I use a class selector or an ID selector?

Basically, it's best to use only class selectors in stylesheets (CSS).

The ID selector requires the element to be unique, while the class selector applies to multiple elements with the same class name. It's possible and flexible.