CSS Selectors 101: Targeting Elements with Precision
In web development there are three foundational technologies for Frontend. They are :
HTML
CSS
JavaScript
Where HTML is used for preparing skeleton of Web Page, CSS is used to make it looking good and JS is used for functionality.
But have you ever wondered how CSS knows which element to style on a webpage? The answer is CSS Selectors. Selectors are used like instructions that tell the browser which styling properties should we applied to which HTML elements. In this article we will break down CSS Selectors in a simple way so you can confidently use them in you projects.
Why are CSS selectors needed?
Imagine you walk into a classroom full of students. Now you want to Select 11 payers for a cricket team. How will you identify them? You need some way to select the right team.
The same thing happens in web development. A web page can have dozens or even thousands of HTML elements. But how does browser know on which element it has to apply which CSS style.
The answers is CSS Selectors. Selectors help us to target a single or Group of HTML elements and apply styles on them.
In Simple words we can say that Selectors is a way of choosing HTML elements on which CSS has to be applied.
Types of Selectors in CSS : -
Universal
Element
Class
ID
Attribute
Combinator
Pseudo- class
Pseudo-element
For Example :
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 id="title">Chai Aur Code</h1>
</body>
</html>
#title{
padding:10px;
color:#11111;
}
Element Selector
This is the simplest CSS selectors which is used to select HTML tags.
Use :
When you want to style all element of same type
When you want to add base Styling
Syntax :
element_name{
/* … */
}
For Example :
HTML Code :
<p>Hello Jee</p>
<p>This is paragraph Tag</p>
CSS Code :
p{
color: #842dcb;
}
Result :
This styles all <p> elements present in HTML file.
Class Selector
It is most commonly used selectors in real world project.
It is used to select an element which have a specific class attribute.
To select elements with a specific class we have to write (.) dot character before class name.
Use :
When you want to apply same style ion multiple elements
When you want reusable styling for components
Syntax :
.class_name {
/* … */
}
For Example :
HTML Code :
<p class="text">This paragraph has bold text</p>
<p class="text">This Paragraph also has bold text</p>
<p class="blue">This paragraph has Blue text</p>
CSS Code :
.text {
font-weight: bold;
}
.blue {
color: #0000FF;
}
Result :
ID selector
The term ID is always used to specify the unique value.
The CSS #id selector selects the element with the specified id.
Use :
When you need to style one unique element only.
When targeting a specific element
Syntax :
#id_value {
/* … */
}
For Example :
HTML Code :
<h1>Welcome to Web Dev</h1>
<p>This is going to be a very amazing Journey</p>
<p></p>
<p id="ChaiCode">With Chai Code</p>
CSS Code :
#ChaiCode {
color: #ffa500;
}
Result :
Group Selectors
The group selectors are used to apply the same CSS properties to different HTML elements, whether they are IDs, classes, or element selectors.
In a group selectors a comma (,) is used to combine multiple selectors together.
Use :
When you want to apply same style on different elements.
When you want to avoid repeating CSS code.
Syntax :
selector1, selector2, selector3{
/* */
}
For Example :
Single line grouping
HTML Code :
<h1>Welcome to Web Dev</h1>
<h2>Welcome to Web Dev</h2>
<h3>Welcome to Web Dev</h3>
<h4>Welcome to Web Dev</h4>
<h5>Welcome to Web Dev</h5>
<h6>Welcome to Web Dev</h6>
CSS Code :
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica", "Arial";
color: #ffa500;
}
Result :
Multi-line grouping
HTML Code :
<h1>Welcome to Web Dev</h1>
<p class="para">This is going to be a very amazing Journey</p>
<p id="ChaiCode">With Chai Code</p>
CSS Code :
h1,
.para,
#ChaiCode {
background-color: rgb(196, 126, 40);
}
Result :
Descendant selectors
The descendant selectors are used to select the element inside(nested within) a specific parent element.
Use :
When you want to apply a style to specific child of a parent.
When you want to limit styling to a particular section of the page.
Syntax :
parent child {
/* */
}
For Example :
HTML Code :
<div class="container">
<p>Hello</p>
</div>
<p>Outside</p>
CSS Code :
.container > p {
color: #0000FF;
}
Result :
Basic selector priority
There are multiple selectors in CSS, but what happens if we apply CSS styles to a single element with all the selectors? Whose style will be applied to that element and why?
The solution to this problem is called priority or specificity. CSS applies the style based on the selector’s specificity (priority level).
Specificity : - It is a rule in CSS which decides which style should be applied to an element when multiple selectors are targeting the same element.
The Basic Priority Order :
Inline styles > Id Selector > Class Selector > Element Selector
For Example :
HTML Code :
<p id="special" class="description">Welcome to Web Dev Journey</p>
CSS Code :
p {
color: red;
}
.description {
color: orange;
}
#special {
color: blue;
}
Result :
Calculating Priority :
It works like a point system:
Element selector = 1 point
Class selector = 10 points
Id selector = 100 points
Inline CSS = 1000 Points
Let us take one example :
h1 /* 1 point */
.textColor /* 10 points */
#value /* 100 points */
div p /* 1+1 = 2 points */
div .textColor /* 1+10 = 11 points */
div #value /* 1+100 = 101 points */
.textColor #value /* 10+100 = 110 points */
The Important (!) Override :
When we use ! important it overrides everything
For Example :
HTML Code :
<div class="description">
<p id="special">Welcome to Web Dev Journey</p>
</div>
CSS Code :
#special {
color: #ff0000;
}
p {
color: #0000ff !important;
}
Result :
Even tough the ID has higher priority, the paragraph is still blue because of !important
Warning : Avoid unnecessary use of !important it makes your code tough to maintain.
Final Summary
Here is what you have learned :
Element Selectors = Target all elements of a same type.
Class Selectors = Target Specific group of elements.
ID Selectors = Target one Specific element.
Group Selectors = Apply the same property to multiple selector.
Descendant Selectors = Target specific child element of a parent
Priority = Who wins when multiple selectors are applied.
