Day 2 - CSS Selectors

Selectors are patterns used to select the element(s) you want to style.

---

1. Element Selector

Selects elements based on the tag name (e.g., p, h1, div).

Code:

/* CSS */
p {  color:  green; }

<!-- HTML -->
<p>This paragraph is selected by its tag name.</p>

Output:

---

2. Class Selector

Selects elements with a specific class attribute. Starts with a dot (.).

Tip: You can reuse classes on many elements.

Code:

/* CSS */
.highlight {
    background-color: yellow;
    color:  red;
}

<!-- HTML -->
<p class="highlight">This paragraph uses a class.</p>
<span class="highlight">So does this span!</span>

Output:

---

3. ID Selector

Selects a unique element with a specific id attribute. Starts with a hash (#).

Important: IDs must be unique on a page.

Code:

/* CSS */
#unique-element {
    border:  2px solid orange;
    background-color: #fff3e0;
}

<!-- HTML -->
<div id="unique-element">I am unique!</div>

Output:

---

4. CSS Hierarchy (Specificity)

When multiple CSS rules target the same element, the browser uses specificity to determine which rule is applied.

Specificity Values

The browser calculates specificity values. The higher the value, the higher the priority:

Selector Type	Specificity Value	Example
Inline styles	1000	style="color: red;"
ID selector	0100	#header
Class / Pseudo-class	0010	.nav, :hover
Element / Pseudo-element	0001	div, p, ::before

Source Order

If two rules have the same specificity, the one that appears later in the CSS takes precedence.

Code:

p {
    color:  blue;  /* gets overridden */
}

p {
    color: red;  /* this one is applied */
}

Result: The text will be red because the second rule comes last.

The !important Rule

The !important keyword is the most powerful rule in CSS. It overrides all other styles, regardless of specificity.

Code:

p {  color: blue  !important; }

#special {
    color:  red;
    /* Will NOT override !important */
}

---

5. Group Selector

Selects multiple elements and applies the same style. Separated by commas.

Code:

/* CSS */
h3, h4 {
    color:  purple;
    text-decoration: underline;
}

<!-- HTML -->
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Output:

---

6. Descendant Selector (Space)

Selects elements that are descendants (inside) of a specified element.

Code:

/* CSS */
/* Selects all <p> inside .container */
.container p {
    color:  teal;
    font-style:  italic;
}

<!-- HTML -->
<div class="container">
    <p>I am inside the  container.</p>
    <div>
        <p>I am nested  deeper, but still inside, so I get styled!</p>
    </div>
</div>

Output:

---

7. Child Selector (>)

Selects all elements that are the direct children of a specified element.

Code:

/* CSS */
/* Selects only direct <p> children of .parent */
.parent > p {
    border-left:  5px solid blue;
}

<!-- HTML -->
<div class="parent">
    <p>I am a direct child  (Styled)</p>
    <div>
        <p>I am a  grandchild (Not styled)</p>
    </div>
</div>

Output:

---

8. Attribute Selector

Selects elements based on an attribute or attribute value.

Code:

/* CSS */
input[type="text"] {
    border:  2px solid red;
}
input[type="email"] {
    border:  2px solid green;
}

<!-- HTML -->
<input type="text" placeholder="Text Input">
<input type="email" placeholder="Email Input">

Output:

---

9. Pseudo-class Selector

Used to define a special state of an element.

Code:

/* CSS */
/* Changes color when mouse hovers over the link */
a:hover {
    color:  red;
}

/* Selects the first item in a list */
li:first-child {
    color:  red;
}

/* Selects the last item in a list */
li:last-child {
    color:  blue;
}

<!-- HTML -->
<a href="#">Hover me!</a>
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Last item</li>
</ul>

Output:

---

10. Pseudo-element Selector

Used to style specified parts of an element, or insert content before/after.

Code:

/* CSS */
/* Inserts content before the element */
.pseudo-demo::before {
    content:  "👉 ";
}

/* Inserts content after the element */
.pseudo-demo::after {
    content:  " 👈";
}

<!-- HTML -->
<p class="pseudo-demo">Look at my pointers!</p>

Output:

---

11. Universal Selector

Selects all elements in a document. It is represented by an asterisk (*).

Code:

/* CSS */
* {
    color:  green;
}

<!-- HTML -->
<p>This paragraph text turns green.</p>
<div>So does this div text.</div>

Output: