Search code examples
htmlcsstagscss-specificity

why is the specificity in CSS not getting implemented in my code?


This is my code where I was testing Specificty in CSS.The specificity of ul#Drinks is (1,0,1) wheras the specificity of .hello is (0,1,0) . Can anyone please tell why the second item of the list(Mountain Dew) is coming out to be brown and not blue ? It would be a great help

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Specificity</title>
    <style>
        .hello{
            color:brown;
            font-weight: bold;
            font-style: unset;
        }
       ul#Drinks{
            color:darkblue;
            font-size: 30px; 
            font-style: italic;   
        }
    </style>
</head>
<body>
    <ul id="Drinks">
        <li>fanta</li>
        <li class="hello">Mountain Dew</li>
        <li>Pepsi</li>
    </ul>
    
</body>
</html>


Solution

  • In CSS, "specificity" applies to the application of properties to a single element with multiple classes or other properties targeted by selectors (learn more here). In this case, there is no concern of specificity because your <li> only has the single class with corresponding CSS, and its styles will override those of its parent.