Come combinare classe e ID nel selettore CSS?

Se ho il seguente div:

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

C'è un modo per definire uno stile che esprima l'idea "Un div con id='content'AND class='myClass'"?

Oppure devi semplicemente andare in un modo o nell'altro come in

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

O

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

Nel tuo foglio di stile:

div#content.myClass

Modifica: anche questi potrebbero aiutare:

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

e, per il tuo esempio:

div#content.sectionA

Modifica, 4 anni dopo: dato che è super vecchio e la gente continua a trovarlo: non usare i tagNames nei selettori. #content.myClassè più veloce di div#content.myClassperché tagName aggiunge un passaggio di filtro non necessario. Usa tagNames nei selettori solo dove devi!

Ci sono differenze tra #header .calloute #header.calloutin css.

Ecco il "semplice inglese" di #header .callout:
Seleziona tutti gli elementi con il nome della classe calloutche sono discendenti dell'elemento con un ID di header.

E #header.calloutsignifica:
selezionare l'elemento che ha un ID di headere anche un nome di classe di callout.

Puoi leggere di più qui trucchi css

Non c'è niente di sbagliato nel combinare un id e una classe su un elemento, ma non dovresti identificarlo con entrambi per una regola. Se vuoi davvero puoi fare:

#content.sectionA{some rules}

Non è necessario il divdavanti all'ID come altri hanno suggerito.

In generale, le regole CSS specifiche per quell'elemento dovrebbero essere impostate con l'ID e quelle avranno un peso maggiore rispetto a quelle della sola classe. Le regole specificate dalla classe sarebbero proprietà che si applicano a più elementi che non si desidera modificare in più punti ogni volta che è necessario modificare.

Questo si riduce a questo:

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

Ha senso?

Bene, generalmente non dovresti aver bisogno di classificare un elemento specificato da id, perché id è sempre univoco, ma se davvero è necessario, dovrebbe funzionare quanto segue:

div#content.sectionA {
    /* ... */
}

È possibile combinare ID e classe nei CSS, ma gli ID devono essere univoci, quindi l'aggiunta di una classe a un selettore CSS lo qualificherebbe eccessivamente.

use: tag.id ; tag#classnelle variabili tag nel tuo css.

Si suppone che gli ID siano univoci a livello di documento, quindi non è necessario selezionare in base a entrambi. Tuttavia, puoi assegnare un elemento a più classiclass="class1 class2"

Penso che ti sbagli tutti. ID contro classe non è una questione di specificità; hanno usi logici completamente diversi.

Gli ID devono essere utilizzati per identificare parti specifiche di una pagina: intestazione, barra di navigazione, articolo principale, attribuzione dell'autore, piè di pagina.

Le classi devono essere utilizzate per applicare gli stili alla pagina. Supponiamo che tu abbia un sito di una rivista generale. Ogni pagina del sito avrà gli stessi elementi: intestazione, navigazione, articolo principale, barra laterale, piè di pagina. Ma la tua rivista ha diverse sezioni: economia, sport, divertimento. Volete che le tre sezioni abbiano un aspetto diverso: economia conservatrice e quadrata, sport d'azione, intrattenimento luminoso e giovane.

Usi le classi per questo. Non devi creare più ID: #economics-article e # sports-article e # entertainment-article. Non ha senso. Piuttosto, definiresti tre classi, .economics, sports e .entertainment, quindi definiresti gli ID #nav, #article e #footer per ciascuno.

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

Non funzionerà quando il tipo di documento è HTML 4.01 però ...