Come combinare classe e ID nel selettore CSS?

Question

Se ho il seguente div:

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

C'è un modo per definire uno stile che esprime 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>

Answer 1

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: poiché questo è super vecchio e la gente continua a trovarlo: non usa i tagNames nei tuoi selettori. # content.myClass è più veloce di div # content.myClass perché tagName aggiunge un passaggio di filtro non necessario. Usa tagNames nei selettori solo dove devi!

Answer 2

Esistono differenze tra #header .callout e # header.callout in css.

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

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

Puoi leggere di più qui trucchi css

Answer 3

Beh, 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 {
    /* ... */
}

Answer 4

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 farlo:

#content.sectionA{some rules}

Non è necessario il div davanti 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?

Answer 5

Puoi puoi combinare ID e classe nei CSS, ma gli ID sono intesi come univoci, quindi l'aggiunta di una classe a un selettore CSS lo qualificherebbe troppo.

Answer 6

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

Answer 7

Gli ID dovrebbero essere univoci a livello di documento, quindi non è necessario selezionare in base a entrambi. Puoi assegnare un elemento a più classi anche se class = " class1 class2 "

Answer 8

Penso che ti sbagli di grosso. 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 dovrebbero essere usate 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.

Answer 9

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

Non funzionerà quando il doctype è HTML 4.01 però ...