Seleccionar elemento basado en múltiples clases

Tengo una regla de estilo que quiero aplicar a una etiqueta cuando tiene dos estilos. ¿Hay alguna forma de realizar esto sin JavaScript? En otras palabras:

  • Deseo aplicar mi regla de estilo solo si el li tiene aplicadas las clases .left y .ui-class-selector .

    ¿Te refieres a dos clases? “Enlazar” los selectores (sin espacios entre ellos):

     .class1.class2 { /* style here */ } 

    Esto selecciona todos los elementos con class1 que también tienen class2 .

    En tu caso:

     li.left.ui-class-selector { } 

    Documentación oficial: selectores de clase CSS2 .


    Como akamike señala un problema con este método en Internet Explorer 6, le recomendamos que lea esto: ¿ utiliza clases dobles en IE6 CSS?

    Los selectores de cadena no están limitados solo a las clases, puede hacerlo tanto para las clases como para los identificadores.

    Clases

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

    Identificador de clase

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

    Yo si

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

    Todos los buenos navegadores actuales admiten esto, excepto IE 6, que selecciona en función del último selector de la lista. Entonces “.classA.classB” seleccionará basado solo en “.classB”.

    Para su caso

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

    o

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

    Puede usar estas soluciones:

    Las reglas CSS se aplican a todas las tags que tienen las siguientes dos clases:

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

    Las reglas CSS se aplican a todas las tags que tienen

  • con las siguientes dos clases:

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

    Solución jQuery:

     $("li.left.ui-class-selector").css("color", "red"); 

    Solución de Javascript:

     document.querySelector("li.left.ui-class-selector").style.color = "red";