How to use the same name classes but in separate styles

Question

see the example to understand:

    <!--Standard Bootstrap -->
    <link href="/build/css/site/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="/build/css/site/mdb.min.css" rel="stylesheet">

so i want a thing like it:

    <div class="btn btn-danger" >Standard Bootstrap Button</div>
    <div class="btn btn-danger" >Material Design Bootstrap Button</div>

The name of the classes are the same. But they are in two separate styles. How can I use the two styles as I said?

Forgive me for the bad English.

Possible duplicate of [How to apply different CSS styles to 2 elements with the same class name?](https://stackoverflow.com/questions/24771055/how-to-apply-different-css-styles-to-2-elements-with-the-same-class-name) — Bharath M Shetty, Jul 06 '17 at 06:43
@Bharath-Shetty thank for comment. but you did not understand me. — Farshid Rezaei, Jul 06 '17 at 06:47
so, you have two stylesheets with the same selectors having different property values, and you want to know how you can apply the styles from one or the other stylesheet? — Jaromanda X, Jul 06 '17 at 06:48
It's not possible! Bharath gave you the link how to do it with a wrapper. Without it you simply can't say which file the class is coming from. It applies the last defined style of a given class name. — user5014677, Jul 06 '17 at 06:51
I think you are meaning this https://stackoverflow.com/questions/2417287/two-css-files-defining-same-class — Bharath M Shetty, Jul 06 '17 at 07:00

CodeHacker · Answer 1 · 2017-07-06T06:56:01.253

You can't, you will allways get the last definition of the class. This is how style-sheets work, That's why they are called CASCADING Stylesheets. So basically what you define in mdb.min.css extends or overwrites what is definied in bootstrap.min.css And yo will get the combination of both

Let's say in bootstrap.min.css you have this :

btn-danger:{
   color:#FF0000;
   width:100px;
}

and in mdb.min.cs you have

btn-danger:{
   background-color:#00FF00;
   width:120px;
}

Your browser will interpret this:

btn-danger:{
   color:#FF0000;
   background-color:#00FF00;
   width:120px;
}

The width will be overwritten by mdb.min.css because that one is added last, the later you add a stylesheet, the more precedence it has, so it will overwrite everything that was defined earlier, and extend everything that hasn't been defined earlier, and merge everything else

Sean · Accepted Answer · 2017-07-06T07:12:14.857

If using SCSS is an option, you could create a file that imports the two files but wraps each in its own namespace. Something like:

.bootstrap {
    @import 'bootstrap.min.css';
}

.mdb {
    @import 'mdb.min.css';
}

This file should go in the same directory as bootstrap.min.css and mdb.min.css and should have a .scss extension. After running the above through an SCSS compiler, you will have one CSS file that you can link to in your HTML file instead of bootstrap.min.css and mdb.min.css. For example, if your new compiled file is named combined.css, then you would replace the link tags in your question with this:

<link href="/build/css/site/combined.css" rel="stylesheet">

You could then use the styles in your HTML like so:

<div class="bootstrap">
    <div class="btn btn-danger" >Standard Bootstrap Button</div>
</div>
<div class="mdb">
    <div class="btn btn-danger" >Material Design Bootstrap Button</div>
</div>

Note that you must wrap your elements in a DIV (or other element) with a class of bootstrap or mdb to get the intended styling.

Yes, as long as you don't mind compiling some SCSS and wrapping your HTML elements as shown above. — Sean, Jul 06 '17 at 07:08
It solves given problem but isn't practical and I have no idea why to do so. — btlm, Jul 06 '17 at 13:15

score 1 · Answer 3 · answered Jul 06 '17 at 06:52

Browser's stylesheet
Included by <link> tag
Nested in <head><style> tag
Inline, e.g. <a style="display: none">

That's the order of loading cascading stylesheets in your document. You can extend style of any class in any further place, but cannot define two classes with same name with different styles. It will override in given order.

score 1 · Answer 4 · answered Jul 06 '17 at 07:13

.btn-danger{
  background-color:red;
  width:90px;
  height:90px;
}

.m1 .btn-danger{
  background-color:green;
  width:90px;
  height:90px;
  
}

 <div class="btn btn-danger" >Standard Bootstrap Button</div>
  <div class="m1">
    <div class="btn btn-danger" >Material Design Bootstrap Button</div></div>

i think one way is like this, hope this may solve your problem

Brett DeWoody · Answer 5 · 2017-07-06T08:20:07.153

Using the <style> scoped attribute this is possible, but comes with several caveats.

It currently works only in Firefox
Every other browser will require a polyfill to add support for the scoped attribute - here's one and there are several others available
And even with a polyfill it may not work - I did a few quick experiments with different polyfills and @import but had no luck

The scoped attribute allows CSS within a <style> tag to be scoped to the parent element where the <style> tag is contained. Here's a quick example:

<div>
  <style scoped>
    p {color: blue;}
  </style>

  <p>This paragraph is blue.</p>
</div>

<div>
  <style scoped>
    p {color: red;}
  </style>

  <p>This paragraph is red.</p>
</div>

Using this, we can replace the CSS selector with an @import to import the Bootstrap CSS in one section and the Material Design Bootstrap in another.

Note: the example below will ONLY work in Firefox as of 07/06/2017.

<div>
  <style scoped>
    @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
  </style>

  <div class="btn btn-danger">Standard Bootstrap Button</div>
</div>

<div>
  <style scoped>
    @import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.min.css)
  </style>

  <div class="btn btn-danger">Material Design Bootstrap Button</div>
</div>

Here's the result in Firefox

Another downside to this is you'll need to re-@import each stylesheet for each section.

There are several polyfills available to add support for scoped to browsers which currently don't support it. There's also a jQuery script if you're already using jQuery.

How to use the same name classes but in separate styles

5 Answers5

Linked