Heute lernen wir etwas über Attributselektoren. Was sind Sie? Wie benutze ich sie? Was sind die neuen CSS3-Attributselektoren? Wir beantworten diese Fragen und mehr.
HTML-Attribute
Bevor ich Ihnen das Konzept der CSS-Attributselektoren vorstellen, sollten Sie wissen, was ein HTML-Attribut ist. Die gute Nachricht ist, dass Sie mit einigen bereits vertraut sind: Klasse, Ich würde, Stil, und href zum Beispiel. Es gibt jedoch noch eine Menge mehr. W3.org enthält eine vollständige Liste.
CSS macht das Anpassen einiger Attribute einfach. Zum Beispiel, wenn wir eine Ich würde oder Klasseverwenden wir nur das Folgende.
Das ist alles gut und gut, aber was ist, wenn wir andere Attribute gestalten möchten? Hier kommen Attributselektoren ins Spiel.
Attribut-Selektoren
Wie wir gerade erfahren haben, sind Attributselektoren genau das, was sie klingen, eine Möglichkeit, bestimmte Attribute mit CSS auszuwählen und anzuvisieren. Das ist wirklich sehr einfach und beinhaltet nur eine Reihe von Klammern, die den von Ihnen verwendeten HTML-Code enthalten. Sehen wir uns an, wie dies funktioniert, indem wir uns zunächst einige grundlegende HTML-Elemente ansehen.
Angenommen, ich wollte nur den Design Shack-Link als Ziel festlegen und gestalten. Ich könnte Pseudo-Selektoren verwenden, aber dies setzt voraus, dass die Liste in dieser Reihenfolge bleibt und die Browser-Unterstützung nicht die beste ist. Stattdessen können wir einen Attribut-Selektor verwenden, um das spezifische Ziel festzulegen. dass wir interessiert sind.
Attribute wiederholen
Ein anderes Beispiel, das häufig verwendet wird, ist eine Liste von Kontakten, von denen einer oder mehrere auf eine bestimmte Weise gestaltet werden sollten. Mit Attributen können wir zwischen Freunden und Kontakten unterscheiden.
Wir können dann gehen und jedes davon stylen rel Attribute unterschiedlich mit derselben Syntax wie oben. Ähnlich wie bei einer Klasse können mehrere Elemente die Kriterien in einer Deklaration erfüllen.
Mit diesem Code können wir die folgenden Ergebnisse erzielen. Beachten Sie, dass diese Selektoren auch dann funktionieren, wenn wir neue Kontakte oben in der Liste hinzufügen : n-te Kind würde nicht Ziemlich cool, richtig? Darüber hinaus unterstützt fast jeder aktuelle Browser diese, einschließlich IE zurück zur Version 7!
Es ist auch wichtig zu wissen, dass Sie nicht so genau sein müssen. Folgendes wird gestaltet irgendein Element mit einem rel Attribut angewendet.
Umgang mit mehrfachen Werten
Das Schwierige an der Verwendung von Attribut-Selektoren ist, dass sie bei mehreren Attributen etwas komisch werden. Betrachten Sie den folgenden Tweak zu unserer vorherigen Liste.
Sie würden denken, dass das Gestalten des ersten Listenelements derselbe Prozess wäre, wenn man bedenkt, dass es immer noch einen Freund hat drin, aber das ist nicht der Fall. Einfach mit = "Freund" Ziel nicht mehr erfolgreich. Stattdessen müssen wir folgendes verwenden, das nach "Freund" sucht. als einer der rel Werte.
Dies führt zu dem? Larry? Listenelement, das als das vorhergehende fett gedruckt wurde a [rel = 'friend'] Syntax hätte es verpasst.
CSS3-Attributselektoren
CSS3 hat uns so viele coole neue Spielzeuge und Werkzeuge zum Spielen gegeben. Es ist daher keine Überraschung, dass es auch einige neue Attributselektoren gibt, mit denen wir unser Targeting noch präziser gestalten können. Beginnen wir mit meinem Favoriten.
Styling gleichnamiger Attribute
Hier werden die Dinge großartig. Nehmen wir an, Sie hatten den folgenden HTML-Code und wollten nur das upperSection und lowerSection, wie würdest du es machen?
Eine einfache Antwort ist der neue "Arbitrary Substring Attribute Value Selector" oder "das wirklich coole kleine Sternchen-Ding". Da die beiden Divs, auf die wir abzielen möchten, beide enthalten? Section? In ihren Namen können wir sie leicht anvisieren.
Das hat mich umgehauen. Hier verwenden wir CSS, um durch unsere ID-Namen zu graben, um bestimmte Werte innerhalb eines größeren Namens zu finden und auf diese Elemente abzustimmen. Dies eröffnet viele Möglichkeiten und macht ein komplexes Targeting mit wenig Markup viel einfacher.
Anfang und Ende
Während der Attributwert-Selector Arbitrary Substring eine bestimmte Zeichenfolge an einer beliebigen Stelle anvisiert, können in den Versionen Anfang und Ende seltenere Fälle behandelt werden, in denen nur das erste oder letzte Element berücksichtigt werden soll.
Nehmen wir an, wir wollen alle Handlanger ansprechen, indem Larry und Moe rot und Curly gelb werden. Dazu können wir verwenden [title ^ = 'Handlanger'] alle mit? stooge? als erstes Wort und [title $ = 'Handlanger'] alle mit? stooge? als letztes Wort
Verketten von Attribut-Selektoren
Nehmen wir an, Sie möchten superspezifisch werden und mehrere Kriterien hinzufügen. Das ist so einfach wie das Zusammenfügen mehrerer Attributselektoren. Mal sehen, wie das mit dem HTML-Code funktioniert.
Jetzt zielen wir auf einen Link mit? Stooge? im Titel, aber nur diejenigen, die mit "the" beginnen.Beachten Sie, dass wir nicht willkürlich zielen wollen? weil dies auch im letzten Punkt erscheint. Hier ist die Syntax, um dies zu erreichen:
Einfach richtig? Wir haben nur die zwei Regeln genommen, die wir brauchten, und sie auf die gleiche Linie stellen. Es ist wichtig anzumerken, dass dies kein entweder / oder Szenario ist, sondern ein beides / und. Nur die Elemente, die beide Kriterien erfüllen, werden geändert.
Lesen Sie weiter
Wenn Sie genug von einem Nerd sind, dass Sie Attributselektoren einfach lieben, gibt es zwei weitere Quellen, die ich Ihnen dringend empfehlen sollte.
CSS-Tricks
Erstens hat Chris Coyier eine sehr gründliche Einführung in CSS Tricks, die einen Großteil der Inhalte abdeckt, die wir hier behandelt haben. Chris ist zwar ein supergeniales CSS und erklärt sie wahrscheinlich viel besser als ich!
Das Buch von CSS3
Als nächstes sollten Sie sich Peter Gasstons The Book of CSS3 ansehen, das in letzter Zeit meine Hauptreferenz für CSS3 war. Ich kann einfach nicht genug von diesem Buch bekommen und habe es zu einer festen Position auf meinem Schreibtisch gemacht! Gasston ergänzt dieses Gespräch mit einer Diskussion über allgemeine und benachbarte Geschwister-Kombinatoren, die eine weitere interessante Möglichkeit darstellen, bestimmte Elemente anzuvisieren. Nehmen Sie das folgende HTML als Beispiel:
Nehmen wir an, wir wollten nur das "Pick me!" Absatz. Der benachbarte Geschwister-Kombinator lässt uns genau das tun. Der folgende Code richtet sich an any p Tags stehen unmittelbar vor einem h1 Etikett. Im obigen Beispiel gibt es nur einen davon (den ersten Absatz nach der Kopfzeile).
In ähnlicher Weise erlaubt uns der General Sibling Combinator ein Targeting alles des p Tags, die hinter dem Header stehen. Dieser erste Absatz ändert also nicht die Farbe, sondern alle anderen.
Dies ist nur ein Vorgeschmack. Weitere Informationen hierzu finden Sie im The Book of CSS3.
Browser-Unterstützung
Wie ich oben bereits erwähnt habe, sind Sie, soweit ich das beurteilen kann, ziemlich gut mit den meisten dieser Techniken bis hin zu IE7 mit allen besprochen Haupt Aktuelle Browser rocken perfekte Unterstützung. Es ist jedoch nicht gerade eine vollständige Punktzahl, wobei einige der weniger bekannten Browser etwas fleckig sind. Unter dev.l-c-n.com finden Sie eine schöne kleine Tabelle mit Browsern und deren Unterstützung für all diese Dinge und mehr.
Fazit
Um ehrlich zu sein, wusste ich vor kurzem wenig oder nichts über CSS-Attributselektoren. Nach ein wenig Recherche war ich verblüfft, wie cool sie sind, und sie sind verblüfft, warum sie so selten zu sein scheinen (Browser-Unterstützung ist besser als für viele der Sachen, mit denen wir herumspielen). Mit nur wenig Code können Sie ein bemerkenswertes spezifisches Targeting mit wenig bis gar keinem zusätzlichen Markup erreichen.
Hinterlasse einen Kommentar und lass mich wissen, was du von Attributselektoren hältst und ob du sie jemals verwendest oder nicht!