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

Question

Si tengo el siguiente div:

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

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

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

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

O

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

Answer 1

En su 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, según su ejemplo:

div#content.sectionA

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

Answer 2

Existen diferencias entre #header .callout y # header.callout en css.

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

Y # header.callout significa:
Seleccione el elemento que tiene una ID de header y también un nombre de clase de callout .

Puede leer más aquí trucos css

Answer 3

Bueno, en general, 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 {
    /* ... */
}

Answer 4

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 div delante de la ID 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}

¿Tiene sentido?

Answer 5

Usted puede combinar ID y clase en CSS, pero los ID están destinados a ser únicos, por lo que agregar una clase a un selector CSS lo sobrecalificaría.

Answer 6

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

Answer 7

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 con class = " class1 class2 "

Answer 8

Creo que todos ustedes están equivocados. 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.

Answer 9

.sectionA[id='content'] { color : red; }

No funcionará cuando el doctype sea html 4.01 ...