¿Cómo combinar clase e ID en el selector CSS?
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 tienes que ir en un sentido u otro como en
<div class="content-sectionA">
Lorem Ipsum...
</div>
O
<div id="content-sectionA">
Lorem Ipsum...
</div>
En tu hoja de estilo:
div#content.myClass
Editar: Estos también podrían ayudar:
div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */
y, según tu ejemplo:
div#content.sectionA
Editar, 4 años después: dado que esto es muy antiguo y la gente sigue encontrándolo: no use los nombres de etiqueta en sus selectores. #content.myClasses más rápido que div#content.myClassporque tagName agrega un paso de filtrado que no necesita. ¡Utilice tagNames en los selectores solo donde sea necesario!
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 clase calloutque sean descendientes del elemento con un ID de header.
Y #header.calloutsignifica:
seleccione el elemento que tiene un ID headery también un nombre de clase callout.
Puedes leer más aquí trucos CSS
Bueno, en general no deberías necesitar clasificar un elemento especificado por id, porque id siempre es único, pero si realmente lo necesitas, lo siguiente debería funcionar:
div#content.sectionA {
/* ... */
}
