How does SCSS choose which class to use if more than one matches the element?

Question

If I have HTML like this:

<div class="modal">
    <div class="class1">
        class1
    </div>
    <div class="class2">
        class2
    </div>
</div>

And LESS that looks like this:

.class1 {
    color: green;
}

.modal {
    .class1 {
        color: red;
    }
}

Then how is it determined which properties get applied to the element?

In the above example, class1 gets colored red but why? If I reorder the SCSS classes, then the class1 text is STILL red so I don't understand how its determined which is used.

score 2 · Accepted Answer · answered Nov 09 '22 at 16:22

2

It's specificity. Your class1 with the red color is more specific because it has class of .modal wrapping it, so red gets used over green.

This might help explain it better. https://www.w3schools.com/css/css_specificity.asp

answered Nov 09 '22 at 16:22

rpb138

106
5

1

Thanks! Exactly what I was looking for but didn't know how to Google it. – mcool Nov 09 '22 at 16:23
MDN is usually a very reliable source of info - in this case see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – A Haworth Nov 09 '22 at 17:01

How does SCSS choose which class to use if more than one matches the element?

1 Answers1