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. However, in another menu, I would like to style the elements differently.

Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?

Can this be done using some kind of if statement condition in CSS?

For example, in 1.html:

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

In 2.html:

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

Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?

Once again, I would not like to remove the class name at all, if possible.

Thanks!

Are these menus wrapped in some other HTML structure that might have a class on it? — lucuma
– lucuma, Commented Jul 16, 2014 at 2:09

lucuma · Accepted Answer · 2014-07-16 02:31:29Z

13

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.

edited Jul 16, 2014 at 2:31

answered Jul 16, 2014 at 2:15

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1631224 Over a year ago

The element in 2.html has multiple nested classes, of which those classes are the parents, grandparents, etc. of that class. The other element in 1.html has only 1 parent class.

lucuma Over a year ago

As long as one of those parent classes is different between the two the second code set will work. I've renamed it ancestor1 and ancestor2 to hopefully make it a little clearer.

Chris Lam · Accepted Answer · 2014-07-16 02:15:05Z

8

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

edited Jul 16, 2014 at 2:15

answered Jul 16, 2014 at 2:08

Chris Lam

3,63417 silver badges11 bronze badges

4 Comments

user1631224 Over a year ago

right, but I would like not to rename the class name. I like to keep it the way it is. Can I just add another class name attribute for one of the elements?

Chris Lam Over a year ago

We are not renaming the class names. We just add another class to the elements.

user1631224 Over a year ago

Can I add a 2nd class name to just 1 of the elements with the same class name, or do both elements with the same class name need to have a 2nd class name to work?

Chris Lam Over a year ago

You can add another class to just one of the elements: See jsfiddle.net/2499Z

Josh · Accepted Answer · 2014-07-17 17:10:43Z

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{

}

edited Jul 17, 2014 at 17:10

answered Jul 16, 2014 at 2:05

Josh

898 bronze badges

9 Comments

user1631224 Over a year ago

what if I don't want to touch the attributes in 1.html, but solely focus on the element in 2.html? Can I just add <div class"classname" id="thing"> Some other code </div> ? Then access it like you said?

Josh Over a year ago

Yes. You can do just that. Just add the the id to 2.html div and add CSS to that one.

user1631224 Over a year ago

hmm, for some reason when I do that, the "active" menu containing that element freezes, and I cannot access any other navigation menus. Does this have anything to do with the fact that I'm using bootstrap?

Josh Over a year ago

Seeing the source would help me better understand your problem. Yes bootstrap does play a huge factor but it may be something very simple. To be clear, you are aware you can create a secondary css file and edit with in it correctly? This way you don't mess with the bootstrap css structure?

BoltClock Over a year ago

If you're attaching the ID and class to the same element, the selector should not have a space. You're also missing the leading . in your double class selectors (where you correctly leave out the space).

|

nikoloza · Accepted Answer · 2014-07-16 02:37:27Z

2

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 {}

answered Jul 16, 2014 at 2:37

nikoloza

9762 gold badges12 silver badges31 bronze badges

3 Comments

steveax Over a year ago

No need for the :not in .classname:not as .classname.second has a higher specificity than .classname.

nikoloza Over a year ago

Yes, just if you need to use ruleset for the first element.

Jonas Praem Over a year ago

Then I would just override the properties in the .classname.second

Mindless · Accepted Answer · 2014-07-16 02:34:01Z

0

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>

answered Jul 16, 2014 at 2:34

Mindless

2,3673 gold badges28 silver badges53 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

4 Comments

9 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

9 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related