Menu
CSS

Class Selector

The class selector in CSS is used to select elements with a specific class attribute. To use a class selector, you prefix the class name with a dot (.). This allows you to apply styles to one or more elements that share the same class name.

 

Basic Usage

To apply a style to elements with a specific class:

/* This will select all elements with the class "my-class" */
.my-class {
  color: blue;
  font-size: 16px;
}

 

Applying Classes in HTML

You add the class attribute to your HTML elements to apply the styles defined by the class selector:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Class Selector Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="my-class">This is a paragraph with the class "my-class".</p>
  <div class="my-class">This is a div with the class "my-class".</div>
</body>
</html>

 

Combining Class Selectors

You can combine class selectors with other selectors to target elements more precisely:

/* Selects all <p> elements with the class "highlight" */
p.highlight {
  background-color: yellow;
}

/* Selects all elements with both "highlight" and "important" classes */
.highlight.important {
  font-weight: bold;
}

/* Selects <div> elements with the class "container" */
div.container {
  padding: 20px;
  border: 1px solid black;
}

 

Multiple Classes

HTML elements can have multiple classes, and you can target them using class selectors:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Classes Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="highlight important">This paragraph is both highlighted and important.</p>
  <p class="highlight">This paragraph is just highlighted.</p>
  <p class="important">This paragraph is just important.</p>
</body>
</html>

 

CSS for Multiple Classes Example

/* Selects elements with the class "highlight" */
.highlight {
  background-color: yellow;
}

/* Selects elements with the class "important" */
.important {
  font-weight: bold;
}

 

Example in HTML and CSS

Here is a complete example demonstrating the use of class selectors in a simple HTML document:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Class Selector Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="highlight">This paragraph has the "highlight" class.</p>
  <p class="highlight important">This paragraph has both "highlight" and "important" classes.</p>
  <div class="container">This div has the "container" class.</div>
</body>
</html>

 

CSS (styles.css)

/* Selects elements with the class "highlight" */
.highlight {
  background-color: yellow;
}

/* Selects elements with the class "important" */
.important {
  font-weight: bold;
}

/* Selects <div> elements with the class "container" */
div.container {
  padding: 20px;
  border: 1px solid black;
}

In this example:

  • Elements with the class highlight will have a yellow background.
  • Elements with the class important will have bold text.
  • <div> elements with the class container will have padding and a border.
CSS