🎯 CSS COURSE – MODULE 2: SELECTORS

📁 File: selectors.md

🎨 CSS Selectors

📌 Introduction

CSS selectors are used to target HTML elements so you can style them.

👉 No selectors = no control over styling 👉 Strong selectors = professional CSS

🧱 1. Element Selector

Targets all elements of a specific type.

p {
  color: blue;
}

💡 Example

<p>Hello World</p>

✔ All <p> elements become blue

🟦 2. Class Selector

Targets elements with a class.

.text {
  color: red;
}

<p class="text">Hello</p>

✔ Used for reusable styles

🟥 3. ID Selector

Targets a single unique element.

#title {
  color: green;
}

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

✔ Only ONE element per page

🧠 Important Rule

🧩 4. Group Selector

Apply same style to multiple elements.

h1,
p,
a {
  color: purple;
}

✔ Saves time

🌐 5. Universal Selector

Targets ALL elements.

* {
  margin: 0;
  padding: 0;
}

✔ Used for reset styles

🧱 6. Descendant Selector

Targets elements inside another element.

div p {
  color: blue;
}

<div>
  <p>Hello</p>
</div>

✔ Only <p> inside <div>

👶 7. Child Selector

Targets direct children only.

div > p {
  color: red;
}

✔ More strict than descendant selector

🔗 8. Adjacent Sibling Selector

Targets element right after another.

h1 + p {
  color: green;
}

<h1>Title</h1>
<p>Paragraph</p>

✔ Only first <p> after <h1>

🧠 Real Example

<div class="box">
  <h1 id="title">Hello</h1>
  <p class="text">Welcome to CSS</p>
</div>

.box {
  background: lightgray;
}

#title {
  color: blue;
}

.text {
  color: red;
}

🚀 Selector Priority (VERY IMPORTANT)

CSS follows priority:

ID > Class > Element

Example:

p {
  color: blue;
}
.text {
  color: red;
}
#id {
  color: green;
}

✔ ID always wins

⚠️ Common Mistakes

• Using too many IDs ❌
• Not understanding specificity ❌
• Overusing * selector ❌
• Mixing selectors randomly ❌

🧪 Mini Exercise

Create a page with:

1. A heading (ID styled)
2. Three paragraphs (class styled)
3. One container div
4. Use:
   • element selector
   • class selector
   • ID selector
   • group selector