CSS Selectors Basics

CSS selectors are used to target HTML elements you want to style.

Here’s a breakdown of the most commonly used selectors:

✅ 1. Element Selector (Tag Name)

Targets all elements of a specific type.

p {
  color: green;
}

✅ Affects all <p> tags on the page.

✅ 2. Class Selector (.)

Targets elements with a specific class name.

<p class="highlight">This is highlighted.</p>

.highlight {
  background-color: yellow;
}

✅ Reusable across multiple elements.

✅ 3. ID Selector (#)

Targets an element with a specific id.

<h1 id="main-title">Welcome</h1>

#main-title {
  color: navy;
}

❗ ID must be unique per page. Avoid using IDs for styling if possible—classes are better for reuse.

✅ 4. Universal Selector (*)

Selects all elements on the page.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

✅ Common for CSS resets or global styles.

✅ 5. Grouping Selectors (,)

Apply the same style to multiple selectors.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

✅ Saves time, reduces repetition.

✅ 6. Nested Selectors / Descendant

Targets elements inside other elements.

nav ul li {
  list-style: none;
}

✅ Targets all <li> items inside <ul> inside <nav>.

🔐 Summary Table