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:
p { color: green; }
/* HTML */
<p>This paragraph is selected by its tag name.</p>
Output:
This paragraph is selected by its tag name.
2. Class Selector
Selects elements with a specific class attribute. Starts with a dot
(.).
Tip: You can reuse classes on many elements.
Code:
.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:
This paragraph uses a class.
So does this span!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:
#unique-element {
border: 2px solid orange;
background-color: #fff3e0;
}
/* HTML */
<div id="unique-element">I am unique!</div>
Output:
4. Group Selector
Selects multiple elements and applies the same style. Separated by commas.
Code:
h3, h4 {
color: purple;
text-decoration: underline;
}
/* HTML */
<h3>Heading 3</h3>
<h4>Heading 4</h4>
Output:
Heading 3
Heading 4
5. Descendant Selector (Space)
Selects elements that are descendants (inside) of a specified element.
Code:
/* 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:
I am inside the container.
I am nested deeper, but still inside, so I get styled!
6. Child Selector (>)
Selects all elements that are the direct children of a specified element.
Code:
/* 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:
I am a direct child (Styled)
I am a grandchild (Not styled)
7. Attribute Selector
Selects elements based on an attribute or attribute value.
Code:
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:
8. Pseudo-class Selector
Used to define a special state of an element.
Code:
/* 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:
- First item
- Second item
- Last item
9. Pseudo-element Selector
Used to style specified parts of an element, or insert content before/after.
Code:
/* 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:
Look at my pointers!
10. 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: 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:
#special {
color: red;
/* Will NOT override !important */
}
!important. It
makes debugging difficult because it breaks the natural cascade of CSS.
Use it only when absolutely necessary.