This question is about how specific CSS should be specified.
Lets say we have this html page:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<span class="container">
Hello World!
</span>
<span>
Goodbye World!
</span>
</div>
</body>
</html>
And we want the "Hello World" text to show up red, but not the "Goodbye World!".
In that case we can simply do:
.container {
color: #FF0000;
}
This will work, because a class is specified for the "Hello World" container. But is this efficient? I mean, the web browser has to look through all HTML available to find the one with the class "container". If we were to the same thing as done above, but being more specific we would get:
html body div span.container {
color: #FF0000;
}
This way only the span, with the class "container", within a div, within the body, within the html tag will be affected. By being this specific I'd say the web browser is given a lot more directions in what to do. The time it needs to search for the element would, as it seems, be reduced.
Now my question is:
Can the web browser apply the CSS more efficient if it is better specified?
