Class Selectors

Class selectors target elements with a specific class attribute. They start with a dot (.).

Basic Class Selectors

Try these class selectors:

• .highlight - elements with class "highlight"
• .container - elements with class "container"
• .important - elements with class "important"

Multiple Classes

An element can have multiple classes. You can select elements with specific combinations:

• .text.large - elements with BOTH "text" and "large" classes
• .large.bold - elements with BOTH "large" and "bold" classes

Styling with Class Selectors

Element + Class Combination

You can combine element and class selectors:

• p.special - only <p> elements with class "special"

Exercise: Style a Button

Add styles to elements with the "button" class: