Different Styles For Same Class Name But Different Id

I have this markup:

Solution 1:

you can write

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

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

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

Solution 2:

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

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

Solution 3:

yes it is possible

For the first outer div

#slider1 .ui-slider

For the second outer div

#slider2 .ui-slider

Solution 4:

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 
}

Solution 5:

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>

Share