To provide a structure to the website we need HTML. But HTML does not itself provide style to the page. We need CSS for that.
So to provide style to the HTML tags we need to select the tags and mention what style I want to add.
Imagine this: You are a teacher in a classroom full of students. Sometimes you need to speak to everyone. Sometimes you need to speak to the students who have done their homework, and sometimes you need to speak to a particular student named "John".
This is how CSS selectors work. You can select every HTML element, a combination of elements or a particular element.
In this blog we will discuss the fundamentals of the CSS selectors with examples.
Why do we need CSS selectors?
Think about a website full of different HTML elements like <h1>, <p>, <div>, <section>, etc. For you to add styles like colour, spacing, alignment to a particular tag will be very difficult and repetitive without CSS selectors.
Without CSS selectors
<h1 style="color: blue; font-size: 32px;">Welcome</h1>
<p style="color: gray; font-size: 16px;">This is a paragraph.</p>
<p style="color: gray; font-size: 16px;">Another paragraph.</p>
With CSS selectors
h1 {
color: blue;
font-size: 32px;
}
p {
color: gray;
font-size: 16px;
}
Using css selectors will reduce you code redundancy as well as make the code much more readable.
CSS selectors
A CSS selector is a pattern used to select and target specific HTML elements on a web page to which a set of CSS styling rules will be applied. They determine which elements receive styles such as color, font, spacing, and layout, allowing for precise control over a website's appearance.
Different types of selectors are:
1. Element selector
The element selector selects HTML elements based on the element name.
Syntax:
elementName {
property: value;
}
Example:
h1 {
color: blue;
font-size: 32px;
}
This tells the browser to find all the <h1> and cascade color to blue and font size to 32px.
BROWSER OUTPUT:
2. Class Selector
If element selectors are like addressing "all students," class selectors are like addressing "all students who has done there homework." You're targeting a specific group that shares a common characteristic.
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Syntax:
.className {
property: value;
}
In HTML, you add classes using the class attribute:
<element class="className">This is the content</element>
Example:
.success {
color: green
}
This tells the browser to find the elements whose class is "success" and give it a color green.
BROWSER OUTPUT:
3. ID selectors
ID selectors are like calling out one person by their unique name: "Hey, John!" There's only one John in the classroom, and you're speaking directly to him.
The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Syntax:
#idName {
property: value;
}
In HTML, you add IDs using the id attribute:
<element id="idName">Content</element>
Example:
HTML:
<body>
<header id="main-header">We1come to my Website</header>
</body>
CSS:
#main-header{
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
font-size: 28px;
}
BROWSER OUTPUT:
4. Group Selectors
Sometimes you want to apply the same styles to different types of elements. Group selectors let you do this without repeating yourself.
It reduces code redundancy and makes it more readable.
Syntax:
selector1, selector2, selector3 {
property: value;
}
Example:
HTML:
<body>
<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
</body>
CSS:
hl, h2, h3 {
font-family: 'Georgia' serif;
color: #0c549c;
}
Browser Output:
In the group selector you can also combine id, class and HTML tags
Example:
h1, .intro-text, #special-paragraph {
font-weight: bold;
color: navy;
}
5. Descendant Selectors
Descendant selectors let you target elements that are nested inside other elements. It's like saying, "I want to talk to the students who are in Room 5," not just any student.
Syntax:
parent descendant {
property: value;
}
Example:
HTML:
<nav class="main-navigation">
<a href="home.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<article>
<p>Check out <a href="example.com">this website</a> for more info.</p>
</article>
CSS:
.main-navigation a {
color: rgb(206, 0, 0);
text-decoration: none;
font-weight: bold;
padding: 10px 15px;
}
article a {
color: rgb(9, 185, 18);
text-decoration: underline;
}
BROWSER OUTPUT:
Selector Priority (CSS Specificity)
What happens when multiple CSS rules try to style the same element? CSS has a priority system (called "specificity") to decide which rule wins.
Think of it like a ranking system in a game: some players have more power than others.
EXAMPLE:
p {
color: blue;
}
.highlight {
color: red;
}
HTML:
<p class="highlight">What color am I?</p>
BROWSER OUTPUT:
CSS selector hierarchy:
Conclusion
Remember, CSS selectors are just the beginning of your CSS journey. But they're the most important part. You cannot style a webpage without understanding how to select elements.
Master these basics first, and everything else will build naturally on this foundation. Every professional web developer uses these selectors daily—they're fundamental skills that will serve you throughout your entire career.
Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.
Top comments (0)