Select element based on multiple classes

Question

I have a style rule I want to apply to a tag when it has two classes  Is there any way to perform this without JavaScript  In other words   lt li class  quot left ui-class-selector quot  gt   I want to apply my style rule only if the li has both  left and  ui-class-selector classes applied

User · Answer

Chain selectors are not limited just to classes, you can do it for both classes and ids.

Classes

.classA.classB {
/*style here*/
}

Class & Id

.classA#idB {
/*style here*/
}

Id & Id

#idA#idB {
/*style here*/
}

All good current browsers support this except IE 6, it selects based on the last selector in the list. So ".classA.classB" will select based on just ".classB".

For your case

li.left.ui-class-selector {
/*style here*/
}

or

.left.ui-class-selector {
/*style here*/
}

User · Answer

You mean two classes   Chain  the selectors  no spaces between them     class1 class2          style here        This selects all elements with class1 that also have class2   In your case   li left ui-class-selector        Official documentation   CSS2 class selectors     As akamike points out a problem with this method in Internet Explorer 6 you might want to read this  Use double classes in IE6 CSS

User · Answer

You can use these solutions     CSS rules applies to all tags that have following two classes     left ui-class-selector         style here       CSS rules applies to all tags that have  lt li gt  with following two classes    li left ui-class-selector        style here       jQuery solution        li left ui-class-selector   css  color    red      Javascript solution     document querySelector  li left ui-class-selector   style color    red

[css] Select element based on multiple classes

Examples related to css

Examples related to css-selectors