How to Apply Different CSS Styles to 2 Elements with The Same Class Name

How to apply different CSS styles to 2 elements with the same class name?

I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:

<nav class='mainnav'><div class="classname one"> Some code </div></nav>

<div class='wrapper'><div class="classname"> Some different code </div></div>

You can easily target these:

.mainnav>.classone {}
.wrapper>.classone {}

Or if the parent html has a class:

<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>

.ancestor1 .classname {}
.ancestor2 .classname {}

Obviously this depends on where in the html they might be.

How can I apply styles to multiple classes at once?

.abc, .xyz { margin-left: 20px; }

is what you are looking for.

How to use the same name classes but in separate styles

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.

styling multiple divs with same class name differently

.right:nth-child(1) {
        background: red;
 }
 .right:nth-child(2) {
        background: yellow;
 }
...

https://www.w3schools.com/CSSref/sel_nth-child.asp

Can I use same class name for different elements styles?

Yes, this is perfectly fine and you can have shared attributed inside .dom if you wish.

Edit although, you don't need to apply a class to all the elements, Once the table has a class you can target sub elements by:

table.dom th {
    /*Style info*/
}
table.dom td {
    /*Style info*/
}

CSS Select Same Class Names and assign different properties

Add a bit of JavaScript to give each .my-child div a new class: child1, child2 etc. Then target those new classes with the colors.

document.querySelectorAll('.school .class-room .my-child')  .forEach(function(el, i) {    el.className += ' child'+(i+1);  })

.my-child.child1 {  color: red;}
.my-child.child2 {  color: green;}
.my-child.child3 {  color: blue;}
/* add as many more as necessary */

<div class="school">  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="my-child">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="my-child">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div>  <div class="class-room">    <div class="my-child">Child</div>  </div>  <div class="class-room">    <div class="other">Child</div>  </div></div>

.page{ ....  //common css for both page one and two}
.page .one{ width:100% .... //common for both  } 
.page .two{ .... //common for both  } 

.My_page .two{ width:50%;}

<div class="page My_page">
   <div class="one"> 
        <div class="two"> 
           <a href="#"> Hi </a>
        </div>
    </div>
</div>