15

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!

user1631224
  • 409
  • 2
  • 6
  • 13

5 Answers5

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.

lucuma
  • 18,247
  • 4
  • 66
  • 91
  • 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. – user1631224 Jul 16 '14 at 02:28
  • 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. – lucuma Jul 16 '14 at 02:30
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

Chris Lam
  • 3,526
  • 13
  • 10
  • 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? – user1631224 Jul 16 '14 at 02:10
  • We are not renaming the class names. We just add another class to the elements. – Chris Lam Jul 16 '14 at 02:11
  • 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? – user1631224 Jul 16 '14 at 02:24
  • You can add another class to just one of the elements: See http://jsfiddle.net/2499Z/ – Chris Lam Jul 16 '14 at 02:40
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{

}
Josh
  • 91
  • 8
  • 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
    Some other code
    ? Then access it like you said?     – user1631224 Jul 16 '14 at 02:08
  • Yes. You can do just that. Just add the the id to 2.html div and add CSS to that one. – Josh Jul 16 '14 at 02:09
  • 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? – user1631224 Jul 16 '14 at 02:12
  • 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? – Josh Jul 16 '14 at 02:15
  • if I style classname.secondclassname in 2.html, but in 1.html, I don't have a 2nd class name attribute, will that still work? – user1631224 Jul 16 '14 at 02:23
  • Yes. Just be sure to keep the CSS for 1.html the same while then adding classname.secondclassname – Josh Jul 16 '14 at 02:27
  • 1
    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). – BoltClock Jul 16 '14 at 02:44
  • Am I reading your edit correctly, or did you just add in the space in one of the places where I said you correctly left it out? – BoltClock Jul 17 '14 at 10:30
  • I removed it completely as I don't like that solution. Thank you for pointing it out. – Josh Jul 17 '14 at 17:11
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 {}
nikoloza
  • 968
  • 2
  • 12
  • 30
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>
Mindless
  • 2,352
  • 3
  • 27
  • 51