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

Question

I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.

I have a .css file that styles that class element in 1 menu.

Answer 1

You can add another class name to each element.

<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>

And then aplpy different rules to them:

.classname.one {
    border: 1px solid #00f;    
}

.classname.two {
    border: 1px solid #f00;    
}

Edit:

Updated Demo link: http://jsfiddle.net/8C76m/2/

If you must keep only one class for each element, you may try the nth-child or nth-of-type pseudo-class:

.classname:first-child {
    font-size: 2em; 
}

.classname:nth-of-type(2) {
    color: #f00;
}

Ref:

http://www.w3schools.com/cssref/sel_firstchild.asp and http://www.w3schools.com/cssref/sel_nth-of-type.asp

Answer 2

I know this is a poor way of doing it, the suggestions from previous answers are helpful, but try this maybe:

First menu:

<div class="classname"> Some code </div>

Second menu:

<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>

Answer 3

Just give each one a different id

#firsthtml .classname {  

}

#sechtml .classname { 

}

Be sure to use the space, as #firsthtml.classname is something totally different.

<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>

---

You could also use two different class names

<div class="classname secondclassname"></div>

Define secondclassname in your css with the additional css

.classname.secondclassname{

}

Answer 4

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.

Answer 5

You can also do something like this:

<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>

And the CSS for the first .classname would be something like that:

.classname:not(.second) {}

For the second element it goes easily:

.classname.second {}