Home/ Questions/Q 6800275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:56:58+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0