css - tipos - Seleccionar elemento basado en múltiples clases

selectores de atributos css

Question

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:

<li class=''left ui-class-selector''>

Quiero aplicar mi regla de estilo solo si li tiene las .left y .ui-class-selector aplicadas.

Answer 1

¿Quieres decir dos clases? "Encadenar" 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, es posible que desee leer esto: ¿ Usar clases dobles en IE6 CSS?

Answer 2

Los selectores de cadena no se limitan solo a las clases, puede hacerlo tanto para las clases como para las identificaciones.

Las 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. Por lo tanto, ".classA.classB" seleccionará basándose en solo ".classB".

Para tu caso

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

o

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

Answer 3

Puedes usar estas soluciones:

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

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

Las reglas CSS se aplican a todas las etiquetas que tienen <li> 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";