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>
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.