Course Recommendation:class CSS .

Selector

Definition and Usage .class attribute value. class attribute value. CSS

attribute value, please write a period (.) character, followed by class To select all types of elements with a specific

element.class attribute value. class attribute value. The selector is used to select elements with a specific

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

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

Example

Example 1

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

.intro {
  background-color: yellow;
}

Try It Yourself

Example 2

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

p.intro {
  background-color: yellow;
}

Try It Yourself

Example 3

.class Different Uses of 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 in the list 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" within the <p> element and all elements with 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