Two css files defining same class

Question

If I have two css files:

File 1:

.colorme
{
   background-color:Red;
}

File 2:

.colorme
{
   background-color:Green;
}

And have included them in a page, which one will take priority? I'm guessing the one that is loaded last? If so is there anyway to ensure which one css file is loaded last?

It might help if you didn't think of this as "defining a class". You are writing rule-sets with selectors that match elements. (These particular selectors match elements based on their class). Then the cascade applies: w3.org/TR/CSS21/cascade.html#cascade — Quentin
– Quentin, Commented Mar 10, 2010 at 13:50
If you don't have control over the order of the files in the HTML, you can always make sure one rule wins with the !important flag. — Tom
– Tom, Commented Mar 10, 2010 at 13:59

David Thomas · Accepted Answer · 2010-03-10 13:56:14Z

65

The one loaded last (or as David points out, more accurately included last) wins in this case. Note that it's per-property though, if you load 2 definitions with different properties, the result will be the combination. If a property is in both the first and second, the last wins on that property.

The only way to ensure which is used last/wins is including the <link> elements in the order you want in the page.

For the property, here's an example:

.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css
.class1 { color: blue; margin: 2px; } //Second .css

is equivalent to:

.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; }

edited Mar 10, 2010 at 13:56

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Mar 10, 2010 at 13:47

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quentin Over a year ago

To be pedantic: It isn't actually the one loaded last, it is the one that appears last in the source order. Given asynchronous loading, you could have a short stylesheet at the end of the head load before a long one at the start.

Jonathan Over a year ago

@Nick Craver Does this still hold if, for example, there are two entries thus in the same file: .class1 {...} .class1 {...} Will the second one listed win? This can happen when CSS is generated by other programs.

Collectives™ on Stack Overflow

Two css files defining same class

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related