Search code examples
cssduplicatesdeclarationinline-code

Double class declaration in CSS


So, due to two sets of messy procedural code colliding in horrible Lovecraftian horror that I can't do much about, I am forced to deal with a situation where I'm going to have two seperate CSS class declarations on the same objects. For example, I might have an end result that looks like...

<div class="my_class" class="cuthullus_child_class_that_overwrites_EVERYTHING">
...something goes here, or so I have been told...
</div>

I know having multiple declarations like this is bad, but there's not anything I can really do about it at present. However, I can control the content of one of those classes, and potentially the order they appear in...

Given this, what effects will the order have on the classes showing/not-showing? Will one overwrite the the other? Will it error out and I'm effectively left with no class? Will they combine as if both were in the same declaration? Or with it simply destroy Dunwich and everything I hold dear?

Edit: Looking into it deeper, it looks like the div will completely refuse to display, but I"m trying to find some way around that if possible.


Solution

  • The two class attributes on the same element will break. The second class will be ignored, see below.

    The only alternative is to add an inline style unless you can clean up the code in the first instance.

    .my_class {
      color: blue;
    }
    .alt_class {
      color: red;
    }
    <div class="my_class" class="alt_class">
      ...something goes here, or so I have been told...
    </div>