¿Cómo combinar clase e ID en el selector CSS?

221

Si tengo el siguiente div:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

¿Hay alguna manera de definir un estilo que exprese la idea "A div with id='content'AND class='myClass'"?

¿O simplemente tienes que ir de una manera u otra como en 

<div class="content-sectionA">
    Lorem Ipsum...
</div>

O

<div id="content-sectionA">
    Lorem Ipsum...
</div>
css css-selectors Larsenal
fuente
2
si va a seleccionar por id, entonces no es necesario seleccionar por clase también, porque id es único, por lo que solo un elemento coincidirá. Entonces, al agregar la clase al mismo selector, solo es un tipeo adicional
TStamper
21
@TStamper: No necesariamente. Estás pensando solo en términos de documentos estáticos. Por ejemplo, es posible que tenga un img#Inboxicono en su página que normalmente está configurado en un 50% de opacidad. Sin embargo, cuando el usuario tiene un mensaje, desea que esté configurado al 100% de opacidad, y el backend lo indica agregando una activeclase al elemento. En tal escenario, tiene sentido tener un selector que combine tanto ID como nombre de clase.
Lèse majesté
@TStamper: Además, ¿no tener el selector combinado id + class más específico le da más peso / precedencia que solo la versión id? AFAIK, debería. (IOW, las reglas del selector combinado de id + clase anularán las reglas del selector combinado de id. (Esta fue mi razón / necesidad de encontrar este hilo en este momento.)
govinda
Entonces, estoy teniendo una situación similar. Tengo, por ejemplo, muchos productos que tienen descripciones, pero también me gustaría tener un control específico sobre productos individuales, así que, ¿puedo hacer: code<p id = Product_1 class = Product> Product 1 </p> <p id = Product_2 class = Product> Product 2 </p> ¿ code Esto permite un estilo general de todos los productos pero también permite un estilo individual para productos específicos?
Tamer Ziady

Respuestas:

328

En tu hoja de estilo:

div#content.myClass

Editar: Esto también podría ayudar:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

y, por su ejemplo:

div#content.sectionA

Editar, 4 años después: como esto es muy antiguo y la gente lo sigue encontrando: no use la etiqueta Nombres en sus selectores. #content.myClasses más rápido que div#content.myClassporque tagName agrega un paso de filtrado que no necesita. ¡Use tagNames en los selectores solo donde deba!

ajm
fuente
31
Especificar que la ID pertenece a un div solo puede ser perjudicial para el rendimiento de representación (aunque sea insignificante) sin ningún beneficio ya que una ID ya es única. Iría con # content.myClass en lugar de hacerlo limpio.
mystrdat
3
div.class#iddebe ser equivalente aunque menos recomendado; use más partes únicas del selector primero.
SF.
1
Bueno, gracias por tu esfuerzo, incluso después de años :). Todavía estoy ayudando a tipos como yo. Solo lo usé para mi proyecto. Votado por seguro.
C4d
76

Hay diferencias entre #header .callouty #header.callouten css.

Aquí está el "inglés simple" de #header .callout:
Seleccione todos los elementos con el nombre de la clase calloutque sean descendientes del elemento con un ID de header.

Y #header.calloutsignifica:
Seleccione el elemento que tiene un ID de headery también un nombre de clase de callout.

Puedes leer más aquí trucos css

Reza Abbasi
fuente
Cometí este error con espacios en blanco: #id .class vs # id.class
ERJAN
5

No hay nada de malo en combinar un id y una clase en un elemento, pero no debería necesitar identificarlo por ambos para una regla. Si realmente quieres puedes hacer:

#content.sectionA{some rules}

No necesita el divfrente de la identificación como otros han sugerido.

En general, las reglas CSS específicas de ese elemento deben establecerse con la ID, y tendrán un mayor peso que las de la clase. Las reglas especificadas por la clase serían propiedades que se aplican a varios elementos que no desea cambiar en varios lugares en cualquier momento que necesite ajustar.

Eso se reduce a esto:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

¿Tener sentido?

Gabriel Hurley
fuente
4

Bueno, generalmente no debería necesitar clasificar un elemento especificado por id, porque el id siempre es único, pero si realmente lo necesita, lo siguiente debería funcionar:

div#content.sectionA {
    /* ... */
}
Blixt
fuente
1

Usted puede combinar Identificación y clase en el CSS, pero identificaciones están destinados a ser único, por lo que añadir una clase a un selector CSS que sobre-calificarlo.

Eric Wendelin
fuente
Ese es un buen punto. Estoy pensando si tal vez tienes un conjunto de clases muy generales (configurando cosas como flotante, alto / ancho, tal vez cosas como fuente) y te gustaría anular algo en ellas en esta excepción única.
ajm
55
A menos que use la misma hoja de estilo con diferentes páginas. :-)
Patrick McElhaney
55
Otro ejemplo: cuando las clases se agregan dinámicamente con Javascript (# optionalFields.enabled)
Patrick McElhaney
Incluso si usa la misma hoja de estilo con diferentes páginas, realmente sería mejor poner una clase en el cuerpo o tener un estilo para la ID y luego separar las definiciones de clase para las clases con los estilos de anulación apropiados.
Eric Wendelin
Sí, creo que es bastante común hacer esto. ej. li # SomeTab.state-selected
Yablargo
1

uso: tag.id ; tag#classen las variables de etiqueta en su CSS.

Lan ...
fuente
1
Creo que lo confundiste un poco: tag.class y tag # id, ¿no?
Harijs Krūtainis
0

Se supone que los ID son documentos únicos en todo el documento, por lo que no debería tener que seleccionar en función de ambos. Puede asignar un elemento a varias clases aunque conclass="class1 class2"

Ben Hughes
fuente
1
La clase puede cambiar. Por ejemplo, puede tener div # id.active y div # id.inactive.
Daniel Moura
Es justo, ahora que lo pienso, he usado esta funcionalidad, pero no entendí cuál era el comportamiento deseado.
Ben Hughes
0

Creo que estás todo mal. IDs versus Class no es una cuestión de especificidad; Tienen usos lógicos completamente diferentes.

Las ID deben usarse para identificar partes específicas de una página: el encabezado, la barra de navegación, el artículo principal, la atribución del autor, el pie de página.

Las clases deben usarse para aplicar estilos a la página. Digamos que tienes un sitio de revista general. Cada página en el sitio tendrá los mismos elementos: encabezado, navegación, artículo principal, barra lateral, pie de página. Pero su revista tiene diferentes secciones: economía, deportes, entretenimiento. Desea que las tres secciones tengan un aspecto diferente: economía conservadora y cuadrada, acción deportiva, entretenimiento brillante y joven.

Usas clases para eso. No desea tener que hacer varias ID: # artículo-economía y # artículo-deportivo y # artículo-entretenimiento. Eso no tiene sentido. En su lugar, definiría tres clases, .economía, deportes y entretenimiento, y luego definiría los identificadores #nav, #artículo y #footer para cada uno.

Greg
fuente
En realidad, puede usar etiquetas HTML semánticas en lugar de ID para la mayoría de los elementos que menciona. Las etiquetas de encabezado, pie de página, navegación, sección, etc. existen por algún motivo.
Walter Schwarz
Pero, de hecho, solo debe usar ID para elementos que deben ser únicos, únicos. Pero incluso así, solo es realmente útil si necesita acceder a ese elemento a través de JavaScript, ya que el uso de ID hace que su CSS sea demasiado específico y difícil de combinar con otro CSS y / o HTML. También existe el argumento de que los ID son más rápidos que las clases, pero la diferencia es realmente insignificante.
Walter Schwarz
-1 
.sectionA[id='content'] { color : red; }

Sin embargo, no funcionará cuando el doctype sea html 4.01 ...

BoltClock
fuente