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 learn about the advanced selectors.
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>CSS Specificity
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 this 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 this 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 this 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 this 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><!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>
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.
Hi Eric, thank you for your valuable feedback. Going forward I will post the resulting html as well in the blog post.