0

I am trying to figure out how the specificity works in case of css. Below you can find a deeply nested div class. I am trying to style the last nested div element using div as well as class. The specificity for class should be 10 whereas by using elements it should be 12, but still the class style is being applied to the element.

<body>
    <div class="test">
        Hello World
        <div class="test">
            Hello World
            <div class="test">
                Hello World
                <div class="test">
                    Hello World
                    <div class="test">
                        Hello World
                        <div class="test">
                            Hello World
                            <div class="test">
                                Hello World
                                <div class="test">
                                    Hello World
                                    <div class="test">
                                        Hello World
                                        <div class="test">
                                            Hello World
                                            <div class="test">
                                                Hello World
                                                <div class="test12">
                                                    Hello World
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS Style

div  div  div  div  div  div  div  div  div  div  div  div{
    color: red ;
}
.test12{
    color: blue;
}

enter image description here

Prabhakar Jha
  • 23
  • 4
  • 3
    You should rather think of it as A,B,C,D more than 0,0,0,0. The one with biggest A wins, then the one with biggest B etc. – Kaiido Oct 27 '21 at 05:52
  • @Kaiido, Thanks for replying and it did help me with my understanding. I think online tutorials need to specify this more clearly, as dealing with numbers creates some confusion for beginners as we normally try to compare numbers and think that which ever has more value needs to be preferred. – Prabhakar Jha Oct 27 '21 at 07:35

0 Answers0