From the course: CSS Fundamentals: Unlock the Power of Web Styling
Join today to access over 24,800 courses taught by industry experts.
Calculating specificity - CSS Tutorial
From the course: CSS Fundamentals: Unlock the Power of Web Styling
Calculating specificity
- [Instructor] Fun fact, each CSS rule actually has a weight score based on the elements that make up the selector. So the score is comprised of how many IDs are used, classes, and elements. And you get points respectively for each of those. So let's say we have an ID. Well, that gives us a point in this column. So our specificity score will be 1,0,0. But you could generally just read this as the number, 100. Now, if we have a Class that's going to be 010 or you could read it as 10. And just a regular ole HTML element is going to get you one point. Let's play ~with some combinations here and see how this works. So here, I've got an ID of sitetitle and that's worth 100. Now, what if I want to specify that that only belongs on the heading one? Well, that's adding an element which adds a point. And then what if we want to take this further and attach a class to it? Well, then we get another point there for a specificity…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.