Wie kombiniere ich Klasse und ID in der CSS-Auswahl?

221

Wenn ich folgendes div habe:

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

Gibt es eine Möglichkeit, einen Stil zu definieren, der die Idee "Ein Div mit id='content'UND class='myClass'" ausdrückt ?

Oder haben Sie einfach den einen oder anderen Weg wie in

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

Oder

<div id="content-sectionA">
    Lorem Ipsum...
</div>
Larsenal
quelle
2
Wenn Sie nach ID auswählen, müssen Sie auch nicht nach Klasse auswählen, da die ID eindeutig ist und nur ein Element übereinstimmt. Das Hinzufügen der Klasse zum selben Selektor ist also nur eine zusätzliche Eingabe
TStamper
20
@ TStamper: Nicht unbedingt. Sie denken nur in statischen Dokumenten. In diesem Fall befindet sich möglicherweise ein img#InboxSymbol auf Ihrer Seite, das normalerweise auf 50% Deckkraft eingestellt ist. Wenn der Benutzer jedoch eine Nachricht hat, soll diese auf 100% Deckkraft gesetzt werden, und das Backend zeigt dies an, indem activedem Element eine Klasse hinzugefügt wird . In einem solchen Szenario ist es sinnvoll, einen Selektor zu haben, der sowohl ID als auch Klassennamen kombiniert.
Lèse Majesté
@TStamper: Hat der spezifischere Kombinationswähler für ID + Klasse nicht mehr Gewicht / Vorrang als die ID-Version allein? AFAIK sollte es. (IOW, die Regeln des ID + Klassen-Combo-Selektors überschreiben die Regeln des ID-Combo-Selektors. (Dies war mein Grund / meine Notwendigkeit, diesen Thread gerade jetzt zu finden.)
Govinda
Ich habe also eine ähnliche Situation. Ich habe zum Beispiel viele Produkte, die Beschreibungen haben, aber auch eine spezifische Kontrolle über einzelne Produkte codewünschen , also kann ich Folgendes tun: <p id = Produkt_1 Klasse = Produkt> Produkt 1 </ p> <p id = Produkt_2 Klasse = Produkt> Produkt 2 </ p> code Dies ermöglicht das allgemeine Styling aller Produkte, aber auch das individuelle Styling für bestimmte Produkte?
Tamer Ziady

Antworten:

327

In Ihrem Stylesheet:

div#content.myClass

Bearbeiten: Dies könnte auch helfen:

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

und nach Ihrem Beispiel:

div#content.sectionA

Bearbeiten, 4 Jahre später: Da diese Super alt ist und die Menschen halten , es zu finden: nicht den Tag - Namen in Ihren Selektoren verwenden. #content.myClassist schneller als div#content.myClassweil der tagName einen Filterschritt hinzufügt, den Sie nicht benötigen. Verwenden Sie tagNames nur in Selektoren, wo Sie müssen!

ajm
quelle
31
Die Angabe, dass die ID zu einem Div gehört, kann sich nur nachteilig auf die Renderleistung auswirken (wenn auch vernachlässigbar), ohne dass dies Vorteile bringt, da eine ID bereits eindeutig ist. Ich würde stattdessen mit # content.myClass gehen, um es sauber zu machen.
Mystrdat
3
div.class#idsollte gleichwertig sein, obwohl weniger empfohlen; Verwenden Sie zuerst eindeutigere Teile des Selektors.
SF.
1
Nun, danke für deine Mühe, auch nach Jahren :). Ich helfe immer noch Leuten wie mir. Ich habe es gerade für mein Projekt verwendet. Sicher upvoted.
C4d
76

Es gibt Unterschiede zwischen #header .calloutund #header.calloutin CSS.

Hier ist das "einfache Englisch" von #header .callout:
Wählen Sie alle Elemente mit dem Klassennamen aus callout, die Nachkommen des Elements mit der ID von sind header.

Und #header.calloutbedeutet:
Wählen Sie das Element aus, das eine ID von headerund auch einen Klassennamen von hat callout.

Sie können hier mehr CSS-Tricks lesen

Reza Abbasi
quelle
Ich habe diesen Fehler mit Leerzeichen gemacht: #id .class vs # id.class
ERJAN
5

Es ist nichts Falsches daran, eine ID und eine Klasse für ein Element zu kombinieren, aber Sie sollten es für eine Regel nicht durch beide identifizieren müssen. Wenn Sie wirklich wollen, können Sie tun:

#content.sectionA{some rules}

Sie brauchen das nicht divvor der ID, wie andere vorgeschlagen haben.

Im Allgemeinen sollten CSS-Regeln, die für dieses Element spezifisch sind, mit der ID festgelegt werden, und diese haben ein höheres Gewicht als die der Klasse. Von der Klasse angegebene Regeln sind Eigenschaften, die für mehrere Elemente gelten, die Sie nicht an mehreren Stellen ändern möchten, wenn Sie Anpassungen vornehmen müssen.

Das läuft darauf hinaus:

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

Sinn ergeben?

Gabriel Hurley
quelle
4

Im Allgemeinen sollten Sie ein durch id angegebenes Element nicht klassifizieren müssen, da id immer eindeutig ist. Wenn dies jedoch wirklich erforderlich ist, sollte Folgendes funktionieren:

div#content.sectionA {
    /* ... */
}
Blixt
quelle
1

Sie können ID und Klasse in CSS kombinieren, aber IDs sollen eindeutig sein. Wenn Sie also eine Klasse zu einem CSS-Selektor hinzufügen, wird diese überqualifiziert.

Eric Wendelin
quelle
Das ist ein guter Punkt. Ich denke, wenn Sie vielleicht eine Reihe sehr allgemeiner Klassen haben (Dinge wie Float, Höhe / Breite, vielleicht Dinge wie Schriftart einstellen) und in dieser einzigartigen Ausnahme etwas in ihnen überschreiben möchten?
Ajm
5
Es sei denn, Sie verwenden dasselbe Stylesheet mit unterschiedlichen Seiten. :-)
Patrick McElhaney
5
Ein weiteres Beispiel: Wenn Klassen dynamisch mit Javascript hinzugefügt werden (# optionalFields.enabled)
Patrick McElhaney
Selbst wenn Sie dasselbe Stylesheet mit unterschiedlichen Seiten verwenden, ist es wirklich besser, eine Klasse in den Body einzufügen oder einen Stil für die ID zu haben und dann die Klassendefinitionen für die Klassen mit den entsprechenden überschreibenden Stilen zu trennen.
Eric Wendelin
Ja, ich denke, das ist ziemlich üblich. zB li # SomeTab.state-selected
Yablargo
1

Verwenden Sie: tag.id ; tag#classin den Tag-Variablen in Ihrem CSS.

Lan ...
quelle
1
Ich denke, Sie haben es ein bisschen durcheinander gebracht - tag.class und tag # id, nein?
Harijs Krūtainis
0

IDs sollten im gesamten Dokument eindeutig sein, daher sollten Sie sie nicht basierend auf beiden auswählen müssen. Sie können einem Element jedoch mehrere Klassen zuweisenclass="class1 class2"

Ben Hughes
quelle
1
Die Klasse kann sich ändern. Beispielsweise können Sie div # id.active und div # id.inactive haben.
Daniel Moura
Fair genug, denken Sie mal darüber nach, ich habe diese Funktionalität verwendet, aber ich habe das gewünschte Verhalten falsch verstanden.
Ben Hughes
0

Ich denke du liegst alle falsch. IDs versus Klasse sind keine Frage der Spezifität. Sie haben völlig unterschiedliche logische Verwendungen.

IDs sollten verwendet werden, um bestimmte Teile einer Seite zu identifizieren: die Kopfzeile, die Navigationsleiste, den Hauptartikel, die Autorenzuordnung und die Fußzeile.

Klassen sollten verwendet werden, um Stile auf die Seite anzuwenden. Angenommen, Sie haben eine allgemeine Magazinseite. Jede Seite der Site enthält dieselben Elemente - Kopfzeile, Navi, Hauptartikel, Seitenleiste, Fußzeile. Aber Ihre Zeitschrift hat verschiedene Bereiche - Wirtschaft, Sport, Unterhaltung. Sie möchten, dass die drei Bereiche unterschiedlich aussehen - konservativ und quadratisch, sportlich, sportlich, hell und jung.

Sie verwenden dafür Klassen. Sie möchten nicht mehrere IDs erstellen müssen - # Wirtschaftsartikel und # Sportartikel und # Unterhaltungsartikel. Das macht keinen Sinn. Stattdessen definieren Sie drei Klassen: Wirtschaft, Sport und Unterhaltung und definieren dann jeweils die IDs #nav, #article und #footer.

Greg
quelle
Sie können für die meisten der von Ihnen erwähnten Elemente tatsächlich semantische HTML-Tags anstelle von IDs verwenden. Die Tags für Kopf-, Fuß-, Navigations-, Abschnitts- usw. sind aus einem bestimmten Grund vorhanden.
Walter Schwarz
In der Tat sollten Sie IDs nur für Elemente verwenden, die eindeutig sein sollten, Singletons. Aber selbst dann ist es nur dann wirklich nützlich, wenn Sie über JavaScript auf dieses Element zugreifen müssen, da die Verwendung von IDs Ihr CSS zu spezifisch und schwierig macht, um es später mit anderem CSS und / oder HTML zusammenzuführen. Es gibt auch das Argument, dass IDs schneller sind als Klassen, aber der Unterschied ist wirklich vernachlässigbar.
Walter Schwarz
-1
.sectionA[id='content'] { color : red; }

Funktioniert nicht, wenn der Doctype HTML 4.01 ist ...

BoltClock
quelle