CSS .class Selector

Definition and Usage

CSS .class Selectors are used to select elements with specific class attribute values.

To select all elements of a specific.) character, followed by class attribute values.

element.class Selectors are used to select elements with specific class attribute value.

to select only elements with a specific class a type of element, write the element name followed by a period (.) character, followed by class attribute values (see the following example 2).

Tip:HTML elements can also refer to multiple class(See the following example 3).

Example

Example 1

Set the styles for all elements with class="intro":

.intro {
  background-color: yellow;
}

Try It Yourself

Example 2

Set the styles for all <p> elements with class="intro":

p.intro {
  background-color: yellow;
}

Try It Yourself

Example 3

.class Different Ways to Use Selectors:

/* Select all elements with class="center" */
.center {
  text-align: center;
}
/* Select all <p> elements with class="large" */
p.large {
  font-size: 200%;
}
/* Select all <p> elements that have class names containing "fancy" and "beige" */
p.fancy.beige {
  font-family: 'Courier New', monospace;
  background-color: beige;
  border: 2px solid green;
}
/* Select all elements with class="ex1" inside the <p> element and class="ex2" */
p.ex1 .ex2 {
  background-color: yellow;
}

Try It Yourself

CSS Syntax

.class {
  css declarations;
}

CSS Syntax

element.class {
  css declarations;
}

Technical Details

Browser Support