Wählen Sie das erste Element mit Datenattribut

Question

Ich möchte die allererste Übereinstimmung eines Absatzes <p> mit dem Attribut data-result="INVALID" mit CSS auswählen.

Ich habe dieses kleine Skript ohne Erfolg versucht. Kein Element wird ausgewählt.

Ich bin nur auf CSS für diese Lösung beschränkt (keine jQuery). Gibt es eine Lösung für dieses Problem?

p[data-result="INVALID"]:first-of-type { 
 
    color: red; 
 
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> 
 

 

 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> 
 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

Answer 1

Leider CSS hat keinen Filterselektor, so etwas wie p[data-result="INVALID"]:first oder p[data-result="INVALID"]:first-with-attribute. Sie können das gewünschte Verhalten nachahmen, indem Sie zuerst alle entsprechenden Elemente auf eine rote Farbe setzen und dann alle Elemente, die das nächste Geschwister eines identischen Elements sind, in Schwarz zurückversetzen.

Ich möchte Sie auch auf zwei Probleme hinweisen, die ich mit Ihrem Code habe: Verwenden von Großbuchstaben Klassennamen, IDs, Attribute und was Sie haben verwirrt. Verwenden Sie alle Kleinbuchstaben oder Großbuchstaben. Einige Leute (vor allem Back-End-Entwickler) benutzen gerne camel-case, aber ich mag es nicht - das ist aber persönlich. Aus Gründen der Einheitlichkeit und Verwaltbarkeit wird jedoch empfohlen, bei einer Konvention zu bleiben und nicht mit dem Mischen zu beginnen. Zweitens ist das b-Tag möglicherweise nicht das gewünschte. Es war früher ein sehr praktisches Tag, wurde aber seitdem in vielerlei Hinsicht von dem Tag strong übertroffen. Auch die folgenden Links für weitere Details:

• MDN
• W3
• HTML5 Doctor

p[data-result="INVALID"] { 
 
    color: red 
 
} 
 

 
p[data-result="INVALID"] ~ p[data-result="INVALID"] { 
 
    color: black; 
 
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> 
 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> 
 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

Answer 2

Ich hätte nie gedacht, dass First-of-Typ nicht zwischen Daten-Attribute zu unterscheiden haben! Sie können etwas wie dieses machen, das es erhält, wenn es entweder als das erste Element angezeigt wird, oder wenn es ein P-Tag ohne Daten-Ergebnis = ungültig davor gibt.

p[data-result="INVALID"]:first-of-type, p:not([data-result="INVALID"]) + p[data-result="INVALID"]{ 
    styles here 
}