Flash cards
Review the key moves
What is the main idea behind CSS Specificity?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
p {___: red;}Put the learning moves in the order that makes the concept easiest to apply.
CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element.
If two or more CSS rules point to the same element, the declaration with the highest specificity will "win", and that style will be applied to the HTML element.
Example
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Live preview
Expected output
The text will be red: <html> <head> <style> p {color: red;} </style> </head> <body> <p>Hello World!</p> </body> </html>Look at the following examples
Now, look at next example:
Example
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Live preview
Expected output
The text will be green, because the class selector has higher specificity: <html> <head> <style> .test {color: green;} p {color: red;} </style> </head> <body> <p class="test">Hello World!</p> </body> </html>Now, look at next example:
Example
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>Live preview
Expected output
The text will be blue, because the id selector has higher specificity: <html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id="demo" class="test">Hello World!</p> </body> </html>Now, look at next example:
Example
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>Live preview
Expected output
The text will be pink, because the inline style has the highest specificity: <html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id="demo" class="test" style="color: pink;">Hello World!</p> </body> </html>