(Attribut) - CSS-Tricks

Anonim

Es gibt viele Möglichkeiten, Elemente in CSS auszuwählen. Die grundlegendste Auswahl erfolgt nach Tag-Namen, z p ( ). Fast alles, was spezifischer als ein Tag-Selektor ist, verwendet Attribute - classund IDbeide wählen diese Attribute in HTML-Elementen aus. Aber classund IDsind nicht die einzigen Attribute, die Entwickler auswählen können. Wir können jedes Attribut eines Elements als Selektoren verwenden.

Die Attributauswahl hat eine spezielle Syntax. Hier ist ein Beispiel:

a(href="https://css-tricks.com") ( color: #E18728; )

Dies ist eine exakte Übereinstimmungsauswahl , die nur Links mit dem genauen hrefAttributwert "https://css-tricks.com" auswählt .

Die sieben verschiedenen Typen

Bei Attributselektoren wird standardmäßig zwischen Groß- und Kleinschreibung unterschieden (siehe Matching ohne Berücksichtigung der Groß- und Kleinschreibung unten) und in Klammern angegeben ().

Es gibt sieben verschiedene Arten von Übereinstimmungen, die Sie mit einem Attributselektor finden können, und die Syntax ist für jeden unterschiedlich. Jeder der komplexeren Attributselektoren baut auf der Syntax des exakten Übereinstimmungsselektors auf - alle beginnen mit dem Attributnamen und enden mit einem Gleichheitszeichen, gefolgt von den Attributwerten, normalerweise in Anführungszeichen. Was zwischen dem Attributnamen und dem Gleichheitszeichen liegt, macht den Unterschied zwischen den Selektoren aus.

(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )

Wert enthält: Der Attributwert enthält einen Begriff als einzigen Wert, einen Wert in einer Werteliste oder als Teil eines anderen Werts. Um diesen Selektor zu verwenden, fügen Sie vor dem Gleichheitszeichen ein Sternchen (*) hinzu. Wählen Sie beispielsweise img(alt*="art")Bilder mit dem Alternativtext "Abstrakte Kunst" und "Sportler, der eine neue Sportart startet" aus, da der Wert "Kunst" im Wort "Starten" steht.

Der Wert befindet sich in einer durch Leerzeichen getrennten Liste: Der Wert ist entweder der einzige Attributwert oder ein ganzer Wert in einem durch Leerzeichen getrennten Satz von Werten. Im Gegensatz zum Selektor "enthält" sucht dieser Selektor nicht nach dem Wert als Wortfragment. Um diesen Selektor zu verwenden, fügen Sie vor dem Gleichheitszeichen eine Tilde (~) hinzu. Zum Beispiel img(alt~="art")werden Bilder mit dem Alternativtext "abstrakte Kunst" und "Kunstausstellung" ausgewählt, aber nicht "Athlet, der eine neue Sportart startet" (den der Selektor "enthält" auswählen würde).

Wert beginnt mit: Attributwert beginnt mit dem ausgewählten Begriff. Um diesen Selektor zu verwenden, fügen Sie vor dem Gleichheitszeichen ein Caret (^) hinzu. Vergessen Sie nicht, dass die Groß- und Kleinschreibung wichtig ist. Zum Beispiel wählt img (alt = "art") Bilder mit dem Alt-Text "art show" und "künstlerisches Muster" aus, jedoch kein Bild mit dem Alt-Text "Arthur Miller", da "Arthur" mit einem Großbuchstaben beginnt .

Der Wert steht an erster Stelle in einer durch Striche getrennten Liste: Dieser Selektor ist dem Selektor „Beginnt mit“ sehr ähnlich. Hier stimmt der Selektor mit einem Wert überein, der entweder der einzige Wert oder der erste in einer durch Striche getrennten Werteliste ist. Um diesen Selektor zu verwenden, fügen Sie vor dem Gleichheitszeichen ein Pipe-Zeichen (|) hinzu. Wählen Sie beispielsweise li(data-years|="1900")Listenelemente mit dem data-yearsWert "1900-2000" aus, nicht jedoch das Listenelement mit dem data-yearsWert "1800-1900".

Wert endet mit: Attributwert endet mit dem ausgewählten Begriff. Um diesen Selektor zu verwenden, fügen Sie vor dem Gleichheitszeichen ein Dollarzeichen ($) hinzu. Wählt beispielsweise a(href$="pdf")jeden Link aus, der mit .pdf endet.

Hinweis zu Anführungszeichen: Unter bestimmten Umständen können Sie den Wert ohne Anführungszeichen verwenden. Die Regeln für die Auswahl ohne Anführungszeichen sind jedoch browserübergreifend inkonsistent. Anführungszeichen funktionieren immer. Wenn Sie sich also daran halten, sie zu verwenden, können Sie sicher sein, dass Ihr Selektor funktioniert.

Siehe die Stiftattributauswahl durch CSS-Tricks (@ css-Tricks) auf CodePen.

Unterhaltsame Tatsache: Die Werte werden als Zeichenfolgen behandelt, sodass Sie keine ausgefallenen Zeichen maskieren müssen, damit sie übereinstimmen, wie wenn Sie ungewöhnliche Zeichen in einer Klassen- oder ID-Auswahl verwenden würden.

(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )

Groß- und Kleinschreibung wird nicht berücksichtigt

Attributselektoren, bei denen die Groß- und Kleinschreibung nicht berücksichtigt wird, sind Teil der Selectors Level 4-Spezifikation der CSS-Arbeitsgruppe. Wie oben erwähnt, wird bei Attributwertzeichenfolgen standardmäßig zwischen Groß- und Kleinschreibung unterschieden. Sie können jedoch durch Hinzufügen iunmittelbar vor der schließenden Klammer in Groß- und Kleinschreibung geändert werden:

(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )

Das Abgleichen ohne Berücksichtigung der Groß- und Kleinschreibung kann sehr praktisch sein, um Attribute anzuvisieren, die unvorhersehbaren, von Menschen geschriebenen Text enthalten. Angenommen, Sie haben eine Sprechblase in einer Chat-App gestylt und möchten Nachrichten mit dem Text „Hallo“ in irgendeiner Form eine „winkende Hand“ hinzufügen. Sie können dies nur mit CSS tun, indem Sie einen Matcher verwenden, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird, um alle möglichen Variationen zu erfassen:

Weitere Informationen finden Sie im CSS-Attributabgleich, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird, nach CSS-Tricks (@ css-Tricks) in CodePen.

Kombiniere sie

Sie können einen Attributselektor mit anderen Selektoren wie Tag, Klasse oder ID kombinieren.

div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )

Oder kombinieren Sie sogar mehrere Attributselektoren. In diesem Beispiel werden Bilder mit Alternativtext ausgewählt, die das Wort "Person" als einzigen Wert oder einen Wert in einer durch Leerzeichen getrennten Liste und einen srcWert mit dem Wert "Lorem" enthalten:

img(alt~="person")(src*="lorem") ( /* style rules here */ )

Siehe die kombinierten Stiftattribute und die Auswahl nur von Attributen durch CSS-Tricks (@ css-Tricks) auf CodePen.

Attributselektoren in JavaScript und jQuery

Attributselektoren können in jQuery wie jeder andere CSS-Selektor verwendet werden. In JavaScript können Sie Attributselektoren mit document.querySelector()und verwenden document.querySelectorAll().

Siehe die Stiftattributauswahl in JS und jQuery nach CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • Klasse
  • ICH WÜRDE

Mehr Informationen

  • Die Skinny-on-Attribut-Selektoren
  • Attributselektoren bei MDN
  • Attributselektoren in der W3C-CSS-Spezifikation

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Irgendein Irgendein Irgendein Irgendein 7+ Irgendein Irgendein