Welcome to the second post on the "Fundamental of CSS" series and in today's post, I will be covering -
- What is CSS Selector?
- Basic CSS Selectors
- CSS Specificity
- CSS Specificity Rules
Read this blog post or watch the video below to understand CSS Selectors and their specificity.
What is CSS Selector?
A CSS Selector is made up of an element selector and a value that identifies a web element on a page. HTML tags, attributes, Id, and Class are all represented as strings. As such, they are patterns that match against tree elements and are one of the various approaches for selecting nodes in an XML text.
Basic CSS Selectors
Here are the basic CSS Selectors.
ID
We can target an id by prefixing the hash symbol to a selector. This is by far the most popular application; however, when using id selectors, exercise caution. Id selectors are not flexible and don't enable reuse. If at all possible, use a tag name, one of the new HTML5 components, or even a pseudo-class as a starting point.
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
#helloWorld {
color: green;
text-align: center;
font-size: 5em;
}
</style>
</head>
<body>
<h1 id="helloWorld">CSS Selectors and Specificity </h1>
</body>
</html>
In the above code, "helloWorld" id is being used to apply to style. Adding the # symbol before the id is the way to use the ID selector.
Class
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
#helloWorld {
color: green;
text-align: center;
font-size: 5em;
}
/* Class Selector */
.heading{
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1 id="helloWorld">CSS Selectors and Specificity </h1>
<h2 class="heading">Technical Potpourri</h2>
<h2 class="heading">Sudipta Deb</h2>
</body>
</html>
In the above code, I have used the class "heading" to select the element. The way to use the class selector is using the . (dot) symbol before the class name. The difference between id and class selector is that you can target multiple components with the latter. When you want your styling to apply to a group of elements, use classes.
Type
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
#helloWorld {
color: green;
text-align: center;
font-size: 5em;
}
/* Class Selector */
.heading{
color: blue;
text-align: center;
}
/* Type Selector */
p {
color: black;
text-align: center;
}
</style>
</head>
<body>
<h1 id="helloWorld">CSS Selectors and Specificity </h1>
<h2 class="heading">Technical Potpourri</h2>
<h2 class="heading">Sudipta Deb</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Vitae nunc sed velit dignissim sodales ut eu sem integer.
Tellus id interdum velit laoreet id.
</p>
</body>
</html>
What if you wanted to target all elements on a page based on their kind instead of using an id or classname? Then use a type selector. In the above code, I have used the type selector to apply the style to all paragraphs on my webpage.
There are few more advanced selectors available as well in CSS, which I will be covering in my next post. But these three basic selectors are good enough to understand the specificity concept from CSS.
Note - If you would like to see the code, here is the Github link:
CSS Specificity
As per MDN -
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
That is, CSS specificity is a collection of rules that browsers utilize to determine which of the developer-defined styles will be applied to a particular element. To apply a style to a specific element, the developer must follow the guidelines so that the browser understands how to do it.
Let's understand the hierarchy of CSS Specificity. CSS calculates specificity in 0-0-0-0 model. Don't worry. I will explain what is this strange 0-0-0-0 means.
As you can see from the above image (specificity is mentioned in highest to lowest) ,
- First left-hand side 0 represents the weightage of Inline styling.
- The next one represents the weightage of ID styling.
- Next one represents the weightage of Class styling.
- and the last one (right most) represents the weightage of Tag styling.
The specificity of a style is determined by the position of the selector in relation to other competing selectors.
The best way to understand this by going through some examples.
Example 1 - Inline Styling
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!-- CSS Specificity: 1-0-0-0 -->
<h1 style="color: blue; text-align: center;">
CSS Specificity - Inline Styling - Technical Potpourri
</h1>
</body>
</html>
In the above code, I have used Inline Styling to style my h1. And according to the above arithmetic model, CSS Specificity here is 1-0-0-0 as the first digit represents the Inline Styling weightage.
Example 2 - ID Styling
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: green;
text-align: center;
}
</style>
</head>
<body>
<!-- CSS Specificity: 1-0-0-0 -->
<h1 style="color: blue; text-align: center; font-size: 5em;">
CSS Specificity - Inline Styling
</h1>
<h1 id="helloWorld">Technical Potpourri</h1>
</body>
</html>
In the above code, I have used ID Styling to style my second h1. And according to the above arithmetic model, CSS Specificity for that h1 is 0-1-0-0 as the second digit represents the ID Styling weightage.
Example 3 - Class Styling
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: green;
text-align: center;
}
/* Class Selector */
/* CSS Specificity: 0-0-1-0 */
.heading{
color: orange;
text-align: center;
}
</style>
</head>
<body>
<!-- CSS Specificity: 1-0-0-0 -->
<h1 style="color: blue; text-align: center; font-size: 5em;">
CSS Specificity - Inline Styling
</h1>
<h1 id="helloWorld">Technical Potpourri</h1>
<h2 class="heading">Sudipta Deb</h2>
</body>
</html>
In the above code, I have used Class Styling to style h2. And according to the above arithmetic model, CSS Specificity for that h2 is 0-0-1-0 as the third digit represents the Class Styling weightage.
Example 4 - Type Styling
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: green;
text-align: center;
}
/* Class Selector */
/* CSS Specificity: 0-0-1-0 */
.heading{
color: orange;
text-align: center;
}
/* Type Selector */
/* CSS Specificity: 0-0-0-1 */
p {
color: black;
text-align: center;
}
</style>
</head>
<body>
<!-- CSS Specificity: 1-0-0-0 -->
<h1 style="color: blue; text-align: center; font-size: 5em;">
CSS Specificity - Inline Styling
</h1>
<h1 id="helloWorld">Technical Potpourri</h1>
<h2 class="heading">Sudipta Deb</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Vitae nunc sed velit dignissim sodales ut eu sem integer.
Tellus id interdum velit laoreet id.
</p>
</body>
</html>
In the above code, I have used Type Styling to style p. And according to the above arithmetic model, CSS Specificity for that h2 is 0-0-0-1 as the fourth digit represents the Type Styling weightage.
CSS Specificity Rules
Again the best way to understand this is by going through examples.
Example 1 - Higher Specificity will override Lower Specificity
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: green;
text-align: center;
}
/* Class Selector */
/* CSS Specificity: 0-0-1-0 */
.heading{
color: orange;
text-align: center;
}
</style>
</head>
<body>
<!-- CSS Specificity: 1-0-0-0 -->
<h1 id="helloWorld" class="heading" style="color: blue; text-align: center;
font-size: 5em;">CSS Specificity
</h1>
</body>
</html>
In the above code, I have used Inline Styling, ID Styling, and Class Styling. But the specificity for Inline Styling is 1-0-0-0 which is definitely higher than any other CSS specificity. That is why when you open this page in the browser you will see that inline styling is being applied into h1 and not the other style. This is due to the fact CSS will apply the style with higher specificity.
Now if I change the same example a little bit by removing the inline styling, then the code will look like this -
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: green;
text-align: center;
}
/* Class Selector */
/* CSS Specificity: 0-0-1-0 */
.heading{
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1 id="helloWorld" class="heading">CSS Specificity</h1>
</body>
</html>
In the above code, I have used ID Styling and Class Styling. But the specificity for ID Styling is 0-1-0-0 which is definitely higher than any other CSS specificity. That is why when you open this page in the browser you will see that ID styling is being applied into h1 and not the other style. This is also due to the fact CSS will apply the style with higher specificity.
Example 2 - Class Selectors will override multiple Element Selectors
Let's first write the code as shown below -
<!DOCTYPE html>
<html>
<head>
<style>
/* Class Selector */
/* CSS Specificity: 0-0-1-0 */
.heading{
color: orange;
text-align: center;
}
/* Type Selector */
/* CSS Specificity: 0-0-0-3 */
body > div > h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1 class="heading">CSS Specificity</h1>
</div>>
</body>
</html>
In the above code, I have used Class Styling and Type Styling. Specificity for Class Styling is 0-0-1-0 which is definitely higher than Type Styling specificity which 0-0-0-3. As 0-0-1-0 is greater than 0-0-0-3, the class styling will be applied to h1.
Example 3 - The last rule wins
Here is the code -
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: green;
text-align: center;
}
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1 id="helloWorld">CSS Specificity</h1>
</body>
</html>
In the above code, I have used two Class Stylings. Specificity is the same for the selectors. So in this type of situation when there is a draw, always the one written at the last will win. So here the text will have a blue color.
Example 4 - The !Important rule
Let's write the code as shown below -
<!DOCTYPE html>
<html>
<head>
<style>
/* ID Selector */
/* CSS Specificity: 0-1-0-0 */
#helloWorld {
color: green;
text-align: center;
}
/* Class Selector */
/* CSS Specificity: 0-0-1-0 */
.heading{
color: orange !important;
text-align: center;
}
</style>
</head>
<body>
<h1 id="helloWorld" class="heading">CSS Specificity</h1>
</body>
</html>
In the above code, I have used ID Styling and Class Styling. As per the model, ID Styling should be applied as the specificity for ID Styling is higher than Class Styling, but when you will open this page, you will find that the text color is orange. The reason is the !important keyword. Important is the magic wand which will override anything and always apply that style.
I will never recommend you to use the !important keyword as this makes it very difficult to maintain the code. I will rather recommend you to use chrome debugger to find out which CSS style is being used and then change accordingly. In the youtube video, I have shown how you can use chrome debugger. Please watch it below -
Final words
Don't get frustrated next time you have a clashing style! Remind yourself of the hierarchy of specificity, which starts with inline styles and progresses through IDs, classes, types,.
Also, keep in mind that you should only be as specific as you need to be while developing CSS. In some circumstances, being overly explicit with your style standards will make it more difficult to challenge such styles.
Note - If you would like to see the code, here is the Github link:
Please provide your feedback/questions in the comment section. I will see you in the next tutorial soon where I will cover "Understand Combinator, Attribute, Pseudo-class & Pseudo-elements Selectors". Till then stay safe and keep learning.
2 Comments
You show code examples, but this would be much more useful if you also showed what the resulting html would look like in the browser.
ReplyDeleteHi Eric, thank you for your valuable feedback. Going forward I will post the resulting html as well in the blog post.
Delete