CSS Selectors 101: Targeting Elements with Precision
Let’s begin with the term selector. As the name suggests, a selector is used to select something. In CSS, selectors help us target specific HTML elements that we want to style.
If you’ve worked with CSS before, you already know that styling only works when we correctly target the elements.
<html>
<head>
<title>CSS</title>
</head>
<body>
<h1>Welcome to Chaicode</h1>
<p>
Let's start with the `selector`.
</p>
</body>
</html>
In the above code snippet, we created a simple HTML page containing one <h1> heading and one <p> paragraph.
There are multiple ways to target these elements in CSS. Let’s start by understanding the different ways to select heading and paragraph tags.
Element Selectors
h1 {
color: red;
text-decoration: underline;
font-size: 15px;
}
p {
color: orange;
font-size: 10px;
font-family: sans-serif;
}
Here, we are using element selectors. This method selects elements based on their tag names and applies styling to all matching elements on the page.
Problem with Element Selectors
If your HTML contains two <h1> tags and two <p> tags, the element selector will apply the same CSS to all of them.
Output
This approach is useful when you want consistent styling across the entire webpage. However, what if you want the first <h1> to have a font size of 20px and the second <h1> to be only 10px?
This limitation leads us to class and ID selectors.
Class and ID Selectors
Class Selector
Represented using a dot (
.)Can be applied to multiple elements
ID Selector
Represented using a hash (
#)Must be unique
Can be applied to only one element
Using Class Selectors
In this example, a class is applied to one <h1> and one <p> element. The remaining elements are left unstyled.
The class selector is then used to apply styles only to the elements that have that class.
As shown in the output, only the elements with the class receive styling.
Using ID Selectors
Here, the id attribute is applied to one <h1> and one <p> element. These elements are then accessed in the CSS using the # symbol.
Since IDs are unique, the styling is applied only to those specific elements.
Group Selectors
Group selectors allow you to apply the same CSS rules to multiple elements at once.
Example:
<html>
<head>
<title>Group Selectors</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<span>Span 1</span>
</body>
</html>
h1, p, span {
color: orange;
}
Instead of styling each element individually, we separate them with commas and apply the same CSS properties to all of them together.
Descendant Selectors
Descendant selectors are used when you want to apply styles to nested elements.
Example HTML:
<!DOCTYPE html>
<html>
<head>
<title>Learning HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<ul>
<li>This is the nested element</li>
</ul>
</div>
</body>
</html>
CSS Examples:
// This is Direct child selector
// means it will only select that child which is directly inside the div , and inside that div the direct ul and inside that ul the direct li will get selected.
div>ul>li {
text-decoration: line-through;
color: blue;
}
OR
// This selects any li inside the ul which is inside the div
// This is called Descendant selector
div ul li {
text-decoration: line-through;
color: blue;
}
Both selectors apply styling to the <li> element, but the first one is more strict because it only targets direct children.
Output:
Selector Priority (CSS Specificity)
At a high level, CSS priority works from lowest to highest, as shown below:
Element Selectors (
p,div,span)Class Selectors (
.text,.name,.heading)Attribute & Pseudo Selectors (
:hover,:placeholder)ID Selectors (
#header,#about)Inline Styles (
style="")!important(Overrides everything)
This means that !important has the highest priority and will override all other CSS rules.
