Element, Class and ID Selectors

What Is It?

Selectors find HTML elements. An element selector matches a tag name, a class selector matches a class token, and an ID selector matches one identifier.

Properties, Tags and Attributes Explained

• .card: Matches class="card"; classes can be reused.
• #featured: Matches id="featured"; an ID should be unique in the document.
• h2, p: A comma groups selectors so both receive the rule.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Reuse a class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element, Class and ID Selectors</title>
  <style>
    .card { padding: 12px; background: #dbeafe; margin-bottom: 8px; }
  </style>
</head>
<body>
  <p class="card">First card</p><p class="card">Second card</p>
</body>
</html>

What you see: Both cards share the same style.

Example 2: Target one ID

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element, Class and ID Selectors</title>
  <style>
    p { color: #334155; }
    #featured { border-left: 4px solid #7c3aed; padding-left: 12px; }
  </style>
</head>
<body>
  <p>Regular story</p><p id="featured">Featured story</p>
</body>
</html>

What you see: Only the featured paragraph has a left border.

When and Where to Use It

Use classes for components, element selectors for general defaults, and IDs mainly for anchors or unique hooks.

Common Mistake or Useful Tip

Do not add an ID to every element just to style it; reusable classes are easier to maintain.

Try It Yourself

Add a third card with the same class.