Apply different css for different elements in a same class

Question

I would like to know if it is possible to apply different css settings for different elements in the same class.

e.g. I have <li> and I want to apply different fore-colors to the #city, #state and #zipcode but I want to achieve this in the same class.

<li>
 <div id="city">    </div>
 <div id="state"> </div>    
 <div id="zipcode"></div>
</li>

I want something like -

.className{
     here is css for city;
     here is css for state;
     here is css for zipcode;
}

Apply specific styling for different ids. Adding styling inside classes isnt possible in css alone, but you could look into preprocessors like sass/scss or less. — Marko Gresak
– Marko Gresak, Commented Sep 5, 2013 at 10:23
different colors to different elements but in same selector? once think about it.. — Mr_Green
– Mr_Green, Commented Sep 5, 2013 at 10:33

gvee · Accepted Answer · 2013-09-05 10:29:38Z

1

I don't really know why you want to do things this way.

You could simply use the id selectors:

#city    { background-color: red;   }
#state   { background-color: green; }
#zipcode { background-color: blue;  }

If you want to specify by class then assuming your <li> has a class of className you can use a number of pseudo-selectors to access the children

DEMO: http://jsfiddle.net/8qAvb/

HTML

<li class="className">
    <div id="city">city</div>
    <div id="state">state</div>
    <div id="other1">other1</div>
    <div id="other2">other2</div>
    <div id="other3">other3</div>
    <div id="other4">other4</div>
    <div id="zipcode">zipcode</div>
</li>

CSS

.className > div {
    background-color: green;
}
.className > div:first-child {
    background-color: red;
}
.className > div:nth-child(3) {
    background-color: lime;
}
.className > div:nth-child(4) {
    background-color: pink;
}
.className > div:nth-child(5) {
    background-color: orange;
}
.className > div:last-child {
    background-color: blue;
}

answered Sep 5, 2013 at 10:29

gvee

17.2k42 silver badges50 bronze badges

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

1 Comment

user20072008 Over a year ago

I want to apply different themes for this set of <li> so I thought of I can create only one class with all css and use it. seems like its not possible with css. Thanks for your answer and time.

Collectives™ on Stack Overflow

Apply different css for different elements in a same class

1 Answer 1

HTML

CSS

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related