CODEWITHSUNDEEP
javascripthtmlcssjquery-ui
Hardeep Brah
Hardeep Brah

Reputation: 17

Different Styles for same class name but different id

I have this markup:

<div id="slider1">
    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
    </div>
</div>
<div id="slider2">
    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
    </div>
</div>

What i want is different style elements for the two elements. They are contained in outer div with different id's. Is this possible? And also this markup is auto generated by the jqueryui plugin so i can't modify it.

Upvotes: 0

Views: 1836

Answers (6)

GrayFox374
GrayFox374

Reputation: 1782

Use your css file, or code block and try to minimize style="" in the markup. Follow these specificity guides:

Specificity is calculated by counting various components of your css and expressing them in a form (a,b,c,d). This will be clearer with an example, but first the components.

Element, Pseudo Element: d = 1 – (0,0,0,1) Class, Pseudo class, Attribute: c = 1 – (0,0,1,0) Id: b = 1 – (0,1,0,0) Inline Style: a = 1 – (1,0,0,0) An id is more specific than a class is more specific than an element.

from: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

 <style>
    .class1 {}
    .class2 {}
    #id1 {}
    #id2 {}
 </style>

Upvotes: 0

user1432124
user1432124

Reputation:

Style with parent child relationship like

parent_id/class child_id/class
{//do stuff here
}

Here like

#slider1 div{
style for 1st one div}
#slider2 div{
style for 2nd one div}
#slider1 a{
style for 1st one a}
#slider2 a{
style for 2nd one a}

Upvotes: 0

Rajat Singhal
Rajat Singhal

Reputation: 11264

you can write 

#slider1 .ui-slider{
    //styles;
    !important;
}

#slider2 .ui-slider{
    //styles;
    !important;
}

By writing !important it'll override auto generated styles..

Upvotes: 1

naim shaikh
naim shaikh

Reputation: 1111

yes it is possible

For the first outer div

#slider1 .ui-slider

For the second outer div

#slider2 .ui-slider

Upvotes: 1

matt3141
matt3141

Reputation: 4423

To apply css to the two elements just use rules like this

#slider1 .ui-slider {
    //style 1
}
#slider2 .ui-slider {
    //style 2
}

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Yes now you can define same css properties as like this 

     #slider1  .ui-slider{
    xxxx:xxxx; // css properties 
    }

 #slider2  .ui-slider{
xxxx:xxxx; // css properties 
}

and now this second option is 

     #slider1 > .ui-slider{
    xxxx:xxxx; // css properties 
    }

 #slider2 > .ui-slider{
xxxx:xxxx; // css properties 
}

Upvotes: 0

Related Questions