Bird
Raised Fist0
CSSmarkup~5 mins

Class selectors in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Class selectors let you style many elements the same way by giving them a shared name. This helps keep your webpage looking neat and consistent.

You want to make all buttons on your page blue without changing each one separately.
You want to highlight certain paragraphs with a special background color.
You want to apply the same font style to multiple headings.
You want to add a red border to some images but not all.
You want to change the text color of specific list items.
Syntax
CSS
.className { property: value; }
Start the class selector with a dot (.) followed by the class name.
You can use the same class on many HTML elements to style them alike.
Examples
This styles all elements with class 'highlight' to have a yellow background.
CSS
.highlight { background-color: yellow; }
HTML element using the 'highlight' class to get the yellow background.
CSS
<p class="highlight">This paragraph is highlighted.</p>
Styles all elements with class 'button' to look like blue buttons with white text.
CSS
.button { color: white; background-color: blue; padding: 0.5rem 1rem; border-radius: 0.25rem; }
Sample Program

This webpage shows two paragraphs and two buttons. The paragraph with class 'highlight' has a yellow background and bold text. The button with class 'button' is styled with white text on blue background and rounded corners. The other paragraph and button have default styles.

CSS
<!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>
  <style>
    .highlight {
      background-color: yellow;
      padding: 1rem;
      font-weight: bold;
    }
    .button {
      color: white;
      background-color: blue;
      padding: 0.5rem 1rem;
      border-radius: 0.25rem;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>This paragraph is normal.</p>
  <p class="highlight">This paragraph is highlighted with a yellow background.</p>
  <button class="button">Click Me</button>
  <button>Normal Button</button>
</body>
</html>
OutputSuccess
Important Notes

You can add multiple classes to one element by separating them with spaces, like class="button highlight".

Class names should be meaningful and easy to remember.

Class selectors are case sensitive in CSS, so .Button and .button are different.

Summary

Class selectors start with a dot and target elements with that class name.

They let you style many elements the same way easily.

Use class selectors to keep your webpage consistent and organized.

Practice

(1/5)
1. What does a CSS class selector start with to select elements by their class?
easy
A. A dot (.) before the class name
B. A hash (#) before the class name
C. No symbol, just the class name
D. An asterisk (*) before the class name

Solution

  1. Step 1: Understand CSS selector symbols

    Class selectors always start with a dot (.) to target elements with that class.

  2. Step 2: Compare with other selectors

    ID selectors use #, element selectors use no symbol, and * selects all elements.

  3. Final Answer:

    A dot (.) before the class name -> Option A

  4. Quick Check:

    Class selector = dot (.) [OK]
Hint: Class selectors always begin with a dot (.) [OK]
Common Mistakes:
  • Using # instead of . for class selectors
  • Omitting the dot before the class name
  • Confusing class selectors with element selectors
2. Which of the following is the correct CSS syntax to style all elements with class highlight?
easy
A. highlight { color: red; }
B. #highlight { color: red; }
C. .highlight { color: red; }
D. *highlight { color: red; }

Solution

  1. Step 1: Identify correct class selector syntax

    The class selector uses a dot (.) followed by the class name, so .highlight is correct.

  2. Step 2: Check other options

    #highlight targets an ID, highlight alone targets elements named 'highlight', and *highlight is invalid syntax.

  3. Final Answer:

    .highlight { color: red; } -> Option C

  4. Quick Check:

    Class selector syntax = dot + class name [OK]
Hint: Remember: dot + class name for class selectors [OK]
Common Mistakes:
  • Using # instead of . for classes
  • Leaving out the dot before class name
  • Confusing class selectors with element selectors
3. Given this HTML and CSS, what color will the text inside the <p> tag be?

<p class="note">Hello!</p>
.note { color: blue; }
.alert { color: red; }
medium
A. Red
B. Blue
C. Black (default)
D. No color applied

Solution

  1. Step 1: Match class in HTML with CSS selector

    The <p> tag has class "note", so the CSS rule .note { color: blue; } applies.

  2. Step 2: Check other CSS rules

    The .alert class styles red but does not apply here because the element does not have that class.

  3. Final Answer:

    Blue -> Option B

  4. Quick Check:

    Class matches CSS selector = blue text [OK]
Hint: Match class attribute with dot selector name [OK]
Common Mistakes:
  • Confusing class names and applying wrong styles
  • Ignoring that only matching classes apply styles
  • Assuming default color when class is present
4. What is wrong with this CSS if you want to style elements with class menu?

menu { font-size: 1.2rem; }
medium
A. Font size value is invalid
B. Missing curly braces
C. Class name should be uppercase
D. Missing dot before class name

Solution

  1. Step 1: Check selector syntax

    The selector menu targets elements named <menu>, not class "menu". Class selectors need a dot before the name.

  2. Step 2: Verify other parts

    Curly braces and font size are correct. Class names are case-sensitive but lowercase is valid.

  3. Final Answer:

    Missing dot before class name -> Option D

  4. Quick Check:

    Class selector needs dot (.) [OK]
Hint: Class selectors always start with a dot (.) [OK]
Common Mistakes:
  • Forgetting the dot before class name
  • Confusing element selectors with class selectors
  • Assuming uppercase class names are required
5. You want to style all buttons with class primary to have a blue background and white text, but only when hovered. Which CSS code correctly uses class selectors and pseudo-classes?
hard
A. .primary:hover { background-color: blue; color: white; }
B. #primary:hover { background-color: blue; color: white; }
C. button.primary { background-color: blue; color: white; }
D. .primary { background-color: blue; color: white; }

Solution

  1. Step 1: Identify correct class selector with hover

    To style elements with class "primary" on hover, use .primary:hover.

  2. Step 2: Check other options

    #primary targets an ID, not class. button.primary styles all buttons with class but not on hover. .primary styles all with class but no hover effect.

  3. Final Answer:

    .primary:hover { background-color: blue; color: white; } -> Option A

  4. Quick Check:

    Class selector + :hover pseudo-class = .primary:hover { background-color: blue; color: white; } [OK]
Hint: Use .class:hover for hover styles on class elements [OK]
Common Mistakes:
  • Using # instead of . for class selectors
  • Forgetting :hover for hover effect
  • Styling without hover when hover is needed