Seleccionar elemento basado en múltiples clases

360

Tengo una regla de estilo que quiero aplicar a una etiqueta cuando tiene dos clases. ¿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 se lihan aplicado las dos .lefty las .ui-class-selectorclases.

Ciel
fuente
css-tricks.com/multiple-class-id-selectors - ver Double Class Selector
firstpostcommenter

Respuestas:

595

¿Te refieres a dos clases? "Encadene" los selectores (sin espacios entre ellos):

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

Esto selecciona todos los elementos class1que 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?

Felix Kling
fuente
66
Tenga en cuenta que a IE6 no le gustan estos, ya que no lee la cadena de clases. Solo mirará la última clase de la cadena.
akamike
16
no lo es :) Todos los sitios web más importantes se han caído, se están cayendo o planean dejar de funcionar en un futuro próximo para IE6. ¡Haga lo mismo!
Thomas Bonini
@Andreas Bonini: Sí, lo sé. Para ser sincero, ya no me importa IE6 durante mucho tiempo. (Eliminé mi comentario anterior porque encontré la otra pregunta que se ocupa de este problema.)
Felix Kling
Sí, no puedes usarlos en IE6, solo toma rutas más largas para diseñar tus elementos. Por ejemplo, diseñar cada clase por separado y usar la especificidad CSS adecuada para anular lo mejor que pueda.
akamike
2
Recuerdo con cariño bailar en la tumba de IE6. Ni siquiera he tenido que soportar IE10 este año, y abandonar IE por completo está en el horizonte. Amo el futuro ☺
Michael Scheper
22

Los selectores de cadena no se limitan 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 hice

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

Todos los buenos navegadores actuales lo admiten, excepto IE 6, que se selecciona en función del último selector de la lista. Por lo tanto, ".classA.classB" seleccionará en función de solo ".classB".

Para su caso

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

o

.left.ui-class-selector {
/*style here*/
}
nidhi0806
fuente
99
Id & Id es un selector conceptualmente extraño.
Félix Gagnon-Grenier
0

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 las <li>siguientes dos clases:

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

Solución jQuery:

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

Solución Javascript:

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