Come combinare class e ID nel selettore CSS?

Se ho la seguente div:

Lorem Ipsum...

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

O semplicemente vai in un modo o nell’altro come in

 
Lorem Ipsum...

O

 
Lorem Ipsum...

Nel tuo foglio di stile:

 div#content.myClass 

Modifica: Questi potrebbero aiutare anche:

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

e, secondo il tuo esempio:

 div#content.sectionA 

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

Ci sono differenze tra #header .callout e #header.callout in css.

Ecco il “plain English” di #header .callout :
Seleziona tutti gli elementi con il callout nome della class che sono discendenti dell’elemento con un ID header .

E #header.callout significa:
Seleziona l’elemento che ha un ID di header e anche un nome di class di callout .

Puoi leggere di più qui trucchi css

In generale, non è necessario classificare un elemento specificato da id, perché id è sempre univoco, ma se proprio ne hai bisogno, il seguente dovrebbe funzionare:

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

Non c’è niente di sbagliato nel combinare un id e una class su un elemento, ma non è necessario identificarlo da entrambi per una regola. Se lo vuoi davvero, puoi fare:

 #content.sectionA{some rules} 

Non hai bisogno del div di fronte all’ID come altri hanno suggerito.

In generale, le regole CSS specifiche per quell’elemento dovrebbero essere impostate con l’ID e quelle porteranno un peso maggiore rispetto a quelle della sola class. Le regole specificate dalla class sarebbero proprietà che si applicano a più elementi che non si desidera modificare in più posizioni 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?

È ansible combinare ID e Class in CSS, ma gli ID devono essere univoci, quindi aggiungere una class a un selettore CSS potrebbe esagerare.

usa: tag.id ; tag#class tag.id ; tag#class nelle variabili tag nel tuo css.

Gli ID dovrebbero essere un documento unico, quindi non dovresti selezionarli in base ad entrambi. Puoi assegnare ad un elemento più classi con class="class1 class2"

Penso che tu abbia sbagliato tutto. Gli ID contro la Classe non sono una questione di specificità; hanno usi logici completamente diversi.

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

Le classi dovrebbero essere utilizzate per applicare stili alla pagina. Diciamo che hai un sito di riviste generali. Ogni pagina del sito avrà gli stessi elementi: intestazione, nav, articolo principale, barra laterale, piè di pagina. Ma la tua rivista ha diverse sezioni: economia, sport, intrattenimento. Volete che le tre sezioni abbiano un aspetto diverso: economia prudente e quadrata, sport action-y, intrattenimento brillante e giovane.

Usi le classi per quello. Non vuoi dover creare più ID: # articolo-economico e # articolo-sportivo e articolo-intrattenimento. Non ha senso. Piuttosto, dovresti definire tre classi, .economia, sport e intrattenimento, quindi definire gli id ​​#nav, #article e #footer per ciascuno.

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

Non funzionerà quando il doctype è html 4.01 sebbene …