0

I have two styles affecting the same element (myDiv) from different stylesheets.

Stylesheet1.css

.myDiv{
  background-color:#000;
}

Stylesheet2.css

.myDiv{
  background-color:#FFF;
}

Neither style is more specific than the other, and neither have !important appended.

However I'm finding that the same css consistently gives priority to Stylesheet1.css on one server, but Stylesheet2.css on another! Can anyone suggest why that would be?

(Due to business reasons I don't want to simply fix it- I just want to understand why it is behaving that way.)

Improve this question
5
  • 2
    depends on the order they are included
    – Pete
    Commented Aug 18, 2021 at 12:13
  • @Pete You mean like the position the reference appears in the html?
    – Urbycoz
    Commented Aug 18, 2021 at 12:19
  • 1
    The order of the rule - the one that comes last will take precendence
    – Pete
    Commented Aug 18, 2021 at 12:21
  • 1
    CSS goes from top to bottom. If you had the two styles in the same stylesheet, the second style would overwrite the other . If you have 2 stylesheets with the same selector, the style from the one you import second, that's the one that will overwrite the first.
    – Mihai T
    Commented Aug 18, 2021 at 12:21
  • Thanks guys. I know it seems simple now but I could not figure that out.
    – Urbycoz
    Commented Aug 18, 2021 at 12:25
Related questions
1335
CSS selector for first element with class
2539
How do I reduce the opacity of an element's background using CSS?
1132
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
Load 6 more related questions Show fewer related questions

0

Reset to default