CSS Selectors 101: A Beginner's Guide
You have written Html now you have to make it beautiful. You write Css but the address to the html tags are not accurate. Your whole effort is lost. This is why CSS Selectors are of utmost important because if you don’t use selectors properly your css will be of no use.
Consider it as a delivery address you put your time in creating a beautiful birthday card but the address is wrong your whole effort gets ruined. Similar is the case with CSS. You apply some style to a html tag and the style get applied to it.
Understanding different types of selectors
Lets take an analogy of addressing a corporate meeting.
Element Selector: ‘Hello to all the Team’. Not very specific in the meeting.
Class Selector: ‘Hello to all the senior members of the team’. Some what specific but not too specific.
ID Selector: ‘Hello to Shriyansh Agarwal from the team’. Very specific.
Now lets see how to address each
Element Selector
Syntax: Just the tag name eg. p, h1, body
CSS:
p {
color: blue;
}
Class Selector
Syntax: Add a . in front of the class name eg. .alert, .highlight
CSS:
.highlight {
background-color: yellow;
}
<p>This is normal text.</p>
<p class="highlight">This text is highlighted!</p>
<span class="highlight">This is also highlighted.</span>
This targets the elements with class highlight.
ID Selector
Syntax: Add a # in front of the id eg. #main-header
CSS:
#unique-button {
background-color: red;
color: white;
}
<button id="unique-button">Do Not Press</button>
This will target the element with id unique-button
Group Selectors (Efficiency)
If you want multiple elements to have the same style then we can apply style to a group of selectors.
Syntax: Selectors seperated by commas.
Css:
h1, h2, p {
font-family: Arial;
}
Descendant Selectors (Context)
If you want to target a child element with a specific parent then use parent child syntax
Syntax: first the parent then the child eg. div p
CSS:
footer p {
color: gray;
font-size: 12px;
}
<p>This paragraph is normal size.</p>
<footer>
<p>This paragraph is gray and small.</p>
</footer>
This p will target only the child element of the footer parent
Basic Priority (Specificity)
What happens if two rules conflict? Browsers use a point system called "Specificity" to decide which rule wins.
ID Selector: Highest Power (Most specific)
Class Selector: Medium Power
Element Selector: Lowest Power (Least specific)
Example: If you have a paragraph <p class="alert" id="urgent">
p { color: blue; }(1 point).alert { color: green; }(10 points)#urgent { color: red; }(100 points)
Result: The text will be Red because the ID is the strongest.
