pseudo - selectores css
¿Cómo combinar clase e ID en el selector de CSS? (9)
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 forma u otra como en
<div class="content-sectionA">
Lorem Ipsum...
</div>
O
<div id="content-sectionA">
Lorem Ipsum...
</div>
Creo que estás equivocado. IDs versus clase no es una cuestión de especificidad; tienen usos lógicos completamente diferentes.
Los ID se deben usar 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 se deben usar para aplicar estilos a la página. Digamos que tienes un sitio de una revista general. Cada página del 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 diferentes apariencias: economía conservadora y cuadrada, acción deportiva y entretenimiento brillante y joven.
Usas clases para eso. No desea tener que crear múltiples identificaciones: # economía-artículo y # artículos-deportivos y # artículos-entretenimiento. Eso no tiene sentido. En su lugar, definiría tres clases, .economics, sports y .entertainment, y luego definirá los identificadores #nav, #article y #footer para cada uno.
En general, no debería necesitar clasificar un elemento especificado por id, porque id es siempre único, pero si realmente lo necesita, lo siguiente debería funcionar:
div#content.sectionA {
/* ... */
}
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 tu ejemplo:
div#content.sectionA
Editar, 4 años después: dado que es muy viejo y la gente lo sigue encontrando: no use tagNames en sus selectores. #content.myClass es más rápido que div#content.myClass porque el tagName agrega un paso de filtrado que no necesita. ¡Use tagNames en los selectores solo donde debe!
Existen diferencias entre #header .callout y #header.callout en css.
Aquí está el "inglés sencillo" de #header .callout :
Seleccione todos los elementos con el nombre de clase llamado que son descendientes del elemento con una ID de header .
Aquí está el "inglés simple" de #header.callout :
Seleccione el elemento que tiene una ID de header y también un nombre de clase de texto callout .
Puedes leer más aquí css trucos
No hay nada de malo en combinar una identificación y una clase en un elemento, pero no debería necesitar identificarlo en una regla. Si realmente quieres puedes hacerlo:
#content.sectionA{some rules}
No necesita el div delante del ID como otros han sugerido.
En general, las reglas de CSS específicas para ese elemento se deben establecer con la ID, y esas van a tener 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?
Puede combinar ID y Class en CSS, pero los ID tienen la intención de ser únicos, por lo que agregar una clase a un selector CSS lo sobrecalificaría.
Se supone que los Id. Deben ser únicos para todo el documento, por lo que no debería tener que seleccionar en función de ambos. Sin embargo, puedes asignar un elemento de clases múltiples con class="class1 class2"
uso: tag.id ; tag#class tag.id ; tag#class en las variables de etiqueta en tu css.
.sectionA[id=''content''] { color : red; }
No funcionará cuando el doctype es html 4.01 aunque ...