9

Is it possible to use 2 CSS classes that have the same name for the selectors, etc. in the same HTML file? If so, how do you differentiate between the two when styling elements?

John Topley
  • 113,588
  • 46
  • 195
  • 237
Xaisoft
  • 45,655
  • 87
  • 279
  • 432

5 Answers5

24

Yes this is possible, simply include two css files in the HEAD section of the document. Any styles set in the first will be overwritten in the second, so say you have this:
First file:

 #something{
  background-color: #F00;
  color: #FFF;
 }

And then in the second file:

 #something{
  background-color: #000;
 }

Then the background color for #something will be overwritten in the second file to black but the color will stay the same since the second file doesn't say anything about it.

cuSK
  • 809
  • 11
  • 26
Pim Jager
  • 31,965
  • 17
  • 72
  • 98
  • Keep in mind this only happens at the same specificity - if the earlier one was `#something .blah` then that would win out. – iono Dec 28 '12 at 03:47
2

Yes it is possible. The definitions in second file will overwrite the definitions of the first file. There is no way to differentiate between the two but to prepend the class names according to the file.

fasih.rana
  • 1,645
  • 1
  • 14
  • 27
2

This should work, try it.

<style>
  .foo{
    border:1px solid blue;
    color:red;
  }
  .foo{
    border:4px solid orange !important;
  }
</style>
<div class="foo">this will have an orange border and red text (no blue border)</div>
Shef
  • 44,808
  • 15
  • 79
  • 90
steav
  • 21
  • 1
1

...that have similar names for the selectors

If the names really are similar and not identical then there shouldn't be a problem.

EBGreen
  • 36,735
  • 12
  • 65
  • 85
0

do you mean 2 definitions for the same class? or 2 class names on an element?

The first case, no.

<style>
  .foo{
    border:1px solid blue;
    color:red;
  }
  .foo{
    border:4px solid orange;
  }
</style>
<div class="foo">this will have an orange border and red text (no blue border)</div>

The second case, yes

<div class="class1 class2">this is valid</div>
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • 2 similar class names in 2 separate files. – Xaisoft Dec 16 '08 at 20:51
  • Well, true. But, misleading. Each new definition expands/overrides the last. The "foo" div will still have red text. – Jonathan Lonowski Dec 16 '08 at 20:53
  • Ah my bad, my code sample didn't match my thought. Xaisoft: if the names are different, then you are totally fine, you can do whatever you want. The only issue is if the names are the exact same. – scunliffe Dec 17 '08 at 01:51