Universelle CSS Selektoren mit Eckekigen Klammern

messmar

Erfahrenes Mitglied
Hallo Zusammen!

ich frage mich, was genau der Unterschied zweischen die folgenden zwei Selektoren:

.ich-bin-eine-klasse{
.....
}

*[class="ich-bin-eine-klasse"]{
.....
}
Es kommt häufiger in Emails-Newsletter, die auch responsive sind bzw. für Mobil-Geräte optimiert sind.

Danke!
Messmar
 
Ersteres ist ein Klassen-Selektor, bei letzterem handelt es sich um einen Attribut-Selektor. Mit ihm wird geprüft, ob ein bestimmtes Attribut (= class) einem bestimmten Wert (= ich-bin-eine-klasse) entspricht.
 
Hm, ich verstehe, was Du meinst, aber warum das mit dem Sternchen etc. ist mir nicht ganz klar..
z.B.
@media only screen and (max-width: 599px) {
*[class="hdlnResp"]{font-size:13px !important;}
.....
........
}

Danke!
Messmar
 
Der Stern repräsentiert den Universal-Selektor, und gilt in diesem Fall im HTML-Dokument für jegliche HTML-Elementtypen mit der Klasse "hdlnResp".

Selbstverständlich ergibt sich hier in deinem ersten Beispiel kein Unterschied gegenüber dem herkömmlichen Klassen-Selektor ;)

Deutlicher wird die Unterscheidung bspw. in diesem Anwendungsfall:
CSS:
input {border:1px solid red} /* gilt für alle <input>-Elementtypen */
input[type=button] {border:none} /* gilt nur für <input type="button"> */
 
Zuletzt bearbeitet:
Zurück