CODEWITHSUNDEEP
css
Qiao
Qiao

Reputation: 17049

Changing to the same css path shows different result

This html:

<html>
<head>
<style>
    #outter_div .span_class a {background: red;}
    #inner_div span a {background: blue;}
</style>
</head>
<body>

<div id='outter_div'>
<div id='inner_div'>
    <span id='span_id' class='span_class'><a href='index.html'>link</a></span>
</div>
</div>

</body>
</html>

results in RED link.

And if we change first line of css to 

#span_id a {background: red;}

Link becomes BLUE.

But both #outter_div .span_class a and #span_id a point to the same element.

Where does this difference come from? Why does a color change when everything is the same?

Upvotes: 0

Views: 81

Answers (2)

maxisam
maxisam

Reputation: 22715

Do you know how to mathematically calculate the specific weight of your CSS selectors ?

Read this.

how to mathematically calculate the specific weight of your CSS selectors

So back to your question.

#span_id a {background: red;}

1, 0, 1

#inner_div span a {background: blue;}

1, 0, 2

Therefore, the link is blue.

It was red before because 

#outter_div .span_class a {background: red;}

1, 1, 1

Upvotes: 2

Nightfirecat
Nightfirecat

Reputation: 11610

The difference comes from something called CSS Specificity.

It's a concept that allows you to logically order CSS rules in priority based on the number of specific types of selectors you use - ID selectors have the most specificity, and element selectors have the least.

For example, the two selectors selecting an HTML tag <h1 id="one" class="one">...</h1>:

#one{
    color: red;
}
.one{
    color: blue;
}
h1{
    color: green;
}

Will appear red. Removing the #one selector will now make it appear blue, and finally, removing the .one selector will make it appear green.

Upvotes: 1

Related Questions