Wie wähle ich ein Element mit einer bestimmten Klasse aus?

81

Nach meinem Verständnis element.classsollte die Verwendung ermöglichen, dass ein bestimmtes Element, das einer Klasse zugewiesen ist, ein anderes "Styling" erhält als der Rest der Klasse. Dies ist keine Frage, ob dies verwendet werden soll oder nicht, sondern ich versuche zu verstehen, wie dieser Selektor funktionieren soll. Wenn ich mir eine Menge Beispiele im Internet ansehe, glaube ich, dass die Syntax korrekt ist und verstehe nicht, warum dies nicht funktioniert.

Hier ist ein Beispiel:

CSS:

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

— Carolyn
quelle

4

Es könnte sich lohnen, den Fragentitel zu aktualisieren, um zu berücksichtigen, dass Sie tatsächlich fragen, wie element.class-Selektoren funktionieren, und nicht, warum sie nicht so funktionieren, wie Sie es erwarten.

— Gabriel

105

Es sollte so sein:

h2.myClasssucht h2 mit klasse myClass. Sie möchten jedoch tatsächlich den Stil für h2 im Inneren anwenden, .myClassdamit Sie den Nachkommen-Selektor verwenden können .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Demo

Dieser Verweis gibt Ihnen eine grundlegende Vorstellung von den Selektoren und wirft einen Blick auf Nachkommen-Selektoren

— PSL
quelle

Um klar zu sein, versuche ich zu verstehen, wie der Element.class-Selektor funktioniert. Ich versuche speziell, die element.class-Syntax zu verwenden, um die Farbe des Elements (h2 in myClass) in Blau im Gegensatz zur Klassenfarbe Grün zu überschreiben. Ich möchte wissen, wie man ein bestimmtes Element unter einer Klasse anvisiert.

— Carolyn

@Carolyn Wenn du das willst, musst du myClass auf h2 verwenden. So jsfiddle.net/wDmwE . Grund dafür ist, dass die CSS-Regel für h2 die Klasse .myClass für den Container überschreibt.

— PSL

1

Genial! Ja, Ihre Antwort hat geholfen. Ich denke, mein Problem lag in der Spezifität (ich lerne gerade darüber). Danke noch einmal!. Sehr geschätzt.

— Carolyn

1

Schließlich. Ich habe lange nach dieser Lösung gesucht. Ich wusste über elementWithAClass.Class {} Bescheid, aber nicht über .Class elementInsideThisClass {}. Vielen Dank. Ich schulde dir ein Bier: D

— kv1dr

58

h2.myClassbezieht sich auf alle h2mit class="myClass".

.myClass h2bezieht sich auf alle h2Kinder von (dh verschachtelten) Elementen mit class="myClass".

Wenn das h2HTML in Ihrem HTML-Code blau angezeigt werden soll, ändern Sie das CSS wie folgt:

.myClass h2 {
    color: blue;
}

Wenn Sie in der Lage sein möchten, dies h2durch eine Klasse und nicht durch ihr Tag zu referenzieren, sollten Sie das CSS unverändert lassen und der h2Klasse im HTML eine Klasse geben :

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

— ASGM
quelle

Vielen Dank - ich versuche tatsächlich zu verstehen, wie der Selektor element.class verwendet wird. Ich möchte alle h2-Elemente unter "myClass"

— Carolyn

@Carolyn, hilft meine aktualisierte Antwort? Wenn nicht, ist mir nicht klar, was Sie fragen.

— ASGM

Ja Dankeschön!! Ich versuche immer noch, meinen Kopf um die Spezifität zu wickeln.

— Carolyn

@Carolyn Gibt es etwas Besonderes, mit dem Sie Probleme haben?

— ASGM

ASGM - Ich hatte Probleme zu verstehen, wie der Selektor element.class funktioniert. Seit ich gepostet habe, habe ich ein bisschen mehr gelernt (zusammen mit den Informationen auf dieser Seite), daher habe ich sie nicht richtig verwendet. Vielen Dank,

— Carolyn

12

Der Element.class-Selektor ist für Styling-Situationen wie diese vorgesehen:

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

Sowohl Ihre Spanne als auch p erhalten die Schriftgröße und die Schriftgröße von .large, aber die Farbe Blau wird nur p zugewiesen.

Wie andere bereits betont haben, arbeiten Sie mit Nachkommen-Selektoren.

— Andrew Clody
quelle

Vielen Dank. Sehr viel. Jeder war sehr hilfreich.

— Carolyn

2

h2.myClassgilt nur für h2Elemente, denen die Klasse myClassdirekt zugewiesen wurde.

Sie möchten es so notieren:

.myClass h2

myClassWomit alle untergeordneten Kinder ausgewählt werden , die den Tagnamen habenh2

— RienNeVaPlu͢s
quelle

1

Mit dem CSS- :first-childSelektor können Sie auf ein Element abzielen, das das erste untergeordnete Element in seinem übergeordneten Element ist.

element:first-child { style_properties }
table:first-child { style_properties }

— Sreekumar P.
quelle