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.

 Some code 
 Some different code 

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