div> p + div [id * = 'header'] - Wenn Sie dieses Durcheinander von Selektoren in CSS von jemandem gesehen haben, könnten Sie es entschlüsseln?
Wenn nicht, dann sollten Sie diese Einführung zu funky CSS-Selektoren lesen, die Sie kennen sollten!
Eine fehlerhafte Ausbildung
Wie viele autodidaktische CSS-Jungs wurde meine Ausbildung aus einer Million verschiedenen Quellen zusammengeschustert. Ich las Artikel, folgte Tutorials und experimentierte, bis mir der Kopf weh tat, bis ich an einem Punkt angelangt war, an dem ich ein komplexes Layout erstellen und das gewünschte Styling ohne allzu große Mühe erreichen konnte.
Im Laufe der Zeit wurde mir jedoch langsam klar, dass mir eines der grundlegendsten Elemente der Arbeit mit CSS fehlte: Selektoren. Sicher, ich wusste, wie man eine Klasse, eine ID oder einen Link anvisiert, aber ich sah oft Codeausschnitte mit Selektoren, die mir völlig fremd waren.
Nachdem ich diese verwirrenden Codierverfahren so lange abgeschrieben hatte, entschied ich mich, mich wirklich mit CSS-Selektoren zu beschäftigen. Es hat nicht nur die Art und Weise verändert, wie ich Code programmiere, sondern es hat mir sehr geholfen, CSS zu interpretieren und von anderen zu lernen.
Ich bin sicher nicht der erste, der über CSS-Selektoren schreibt, und dieser Artikel wird auf keinen Fall etwas Revolutionäres in die Diskussion bringen. Aber wenn Sie wie ich selbst sind, ein autodidaktischer Programmierer mit fleckiger Bildung, dann könnte dies der Artikel sein, der einige Ihrer größten Verwirrungen aufklärt, wenn Sie den geheimnisvollen Code der anderen bestaunen.
Die Familie treffen
Bevor Sie sich mit komplexen CSS-Selektoren vertraut machen. Sie müssen einige Dinge über die HTML-Hierarchie verstehen. Sie haben diese Begriffe schon einmal gehört, aber es ist an der Zeit, wirklich darüber nachzudenken und sicherzustellen, dass Sie verstehen, wie sie funktionieren.
Wie wir die Struktur eines HTML-Dokuments erklären und darauf verweisen, ist die Metapher eines Familienstammbaums. Es gibt Eltern, Kinder, Geschwister, Nachkommen und Vorfahren. Um zu sehen, was jedes bedeutet, verwenden wir den folgenden einfachen Code.
Unser Div enthält zwei Absatzelemente und einen Anker. Alles davon sind Nachkommen des div, das in diesem Fall die Wurzelposition einnimmt. Ein Kind ist ein direkter Nachkomme eines Elternteils. Im obigen Beispiel sind also beide Absätze Kinder des div, der Anker jedoch nicht. Stattdessen ist es ein Kind des zweiten Absatzes.
Wenn wir den Baum zurückgehen, hat das div eine andere Beziehung zu den Elementen. Das div ist das übergeordnete Element der Absatz-Tags, jedoch ein Vorfahr des Anker-Tags.
Die endgültige Beziehung ist die der Geschwister, auch als benachbarte Geschwister bekannt. Wie in Ihrer Familie teilen Geschwister ein Elternteil. Im obigen Beispiel sind die beiden Absätze gleichgeordnet, da das übergeordnete Element beider Elemente das div ist. Der Anker hat keine Geschwister, weil er das einzige Kind des Absatzes ist.
Verstanden?
Die Familienmetapher kann wirklich verwirrend werden, aber nur, wenn Sie darüber nachdenken. Die Terminologie ist ziemlich intuitiv und wenn Sie über die wörtliche Bedeutung des Wortes nachdenken, können Sie ziemlich genau erraten, was es in HTML-Begriffen bedeutet.
Für den Fall, dass Sie noch etwas mehr Klarheit benötigen, schreiben wir das obige Beispiel mit Inhalt, der die Hierarchie der einzelnen Elemente erläutert.
Die Kindauswahl
Nachdem wir nun verstehen, wie HTML funktioniert, können wir unsere Diskussion über CSS-Selektoren beginnen, die dieses System nutzen. Ausgestattet mit unserem Wissen darüber, was ein HTML-Kind wirklich ist, können wir uns die CSS-Kindauswahl ansehen.
Der untergeordnete Wähler wird durch das Größer-als-Symbol dargestellt:?> Var13 -> ?. Sie haben dies bereits in CSS gesehen, können aber möglicherweise nicht genau verstehen, wie es funktioniert.
Diese Anweisung übernimmt die Absatz-Tags, die dem div untergeordnet sind, und färbt sie blau. Beachten Sie, dass dies nur für das funktioniert Kinder von diesem div, nicht notwendigerweise alle Nachkommen. Lassen Sie uns dies anhand des folgenden Beispiels näher untersuchen.
Nehmen wir an, aus irgendeinem schrecklichen Grund wollten wir diese Verbindungsfarbe in Gelb ändern. Natürlich könnten wir den Link auf verschiedene Arten anvisieren, aber wir versuchen, etwas über die Kindauswahl zu erfahren. Gehen Sie also mit mir. Mal sehen, was passiert, wenn wir dieses CSS implementieren:
Whoops, das hat nichts geändert! Das liegt daran, dass der Link kein Kind des div ist, sondern ein Kind des Absatzes. Wenn wir also diesen Code ändern, um auf Anker zu zielen, die Kinder von Absätzen sind, erreichen wir unser Ziel.
Auftrag
Wenn Sie nun wissen, wie die untergeordnete Auswahl funktioniert, denken Sie daran, dass die Reihenfolge wie bei allen CSS einen großen Unterschied macht. Um dies zu veranschaulichen, beginnen wir mit dieser grundlegenden HTML-Struktur:
Betrachten wir nun die folgenden zwei CSS-Snippets. Sie sehen ähnlich aus, sind aber sehr unterschiedlich!
Das erste Snippet macht alle Absätze rot und ändert dann nur die untergeordneten Elemente der Wurzel div in blau.
Das zweite Snippet führt das Gegenteil durch, es zielt zunächst auf die untergeordneten Absätze des ersten Div ab und macht sie blau, ändert sich dann jedoch alles der Absätze zu rot. Dies führt natürlich zu drei roten Absätzen.
Das zweite Beispiel bricht eine wichtige Regel in CSS: Gehen Sie von allgemein zu spezifisch, nicht umgekehrt.Da wir mit einem speziellen Selektor-Setup angefangen haben, das nur zwei Absätze als Ziel hat, und dann zu einem allgemeinen Selektor mit allen Absätzen übergegangen sind, hat der zweite den ersten komplett außer Kraft gesetzt!
Verkettung
Wenn Sie wirklich verrückt werden möchten, können Sie Child-Selektoren miteinander verketten. Im folgenden Beispiel habe ich zuerst alle untergeordneten Paragraphen des Beispiels 3 div anvisiert und sie in blau geändert. Danach habe ich alle Absätze berücksichtigt, die die Kinder von divs waren ebenfalls Kinder eines anderen div und wandelten diese in rot um.
Die benachbarte Geschwisterauswahl
Mit Kindselektoren, die alle recht weit entfernt sind, müssen wir lernen, Geschwister anzuvisieren. Der benachbarte Geschwisterwähler wird durch das Pluszeichen dargestellt:? + ?. Damit können wir jedes Element ansprechen, das ein gleiches Element eines anderen Elements ist. Hier ist ein Beispiel:
In unserem CSS haben wir den benachbarten Geschwister-Selektor verwendet, der den zweiten und dritten Absatz in rot geändert hat. Das ist sehr schwierig, nicht wahr? Instinktiv erwarten wir, dass auch der erste Absatz rot ist. Immerhin befindet sich der erste Absatz auf derselben Baumebene wie die nächsten beiden und hat Geschwister. Diese Auswahl gilt jedoch nur für Elemente, denen etwas anderes vorangestellt ist. In diesem Fall werden nur die Absätze anvisiert, denen ein Geschwisterabschnitt direkt vorangeht. Dem ersten Absatz in der Liste wird das div vorangestellt, es wird also nicht geändert.
In diesem Sinne würde der folgende Code den Hintergrund des verschachtelten div in grau ändern, da ihm tatsächlich ein Absatz vorangeht.
Weitere Verkettung
Wie bei untergeordneten Selektoren können Sie benachbarte Geschwister-Selektoren verketten. Das System funktioniert genauso wie zuvor. Sie können die beiden auch kombinieren, um eine zusätzliche Schwierigkeitsstufe zu erhalten. Hier fängt unser CSS an, merkwürdig auszusehen.
In diesem Beispiel haben wir uns auf Abschnitte konzentriert, die untergeordnete Elemente waren, denen auch direkt ein anderer Absatz vorangeht.
Der allmächtige Sternchen
Das letzte Stück verwirrender CSS, über das ich gehen möchte, ist das Schlimmste, das noch nicht erreicht wurde: das Sternchen. Wussten Sie, dass der Stern je nach Kontext zwei völlig unterschiedliche Dinge referenzieren kann?
Universalauswahl
Das erste Beispiel eines Sterns in CSS ist dasjenige, mit dem Sie wahrscheinlich am besten vertraut sind: der universelle Selektor. Dieser Selektor zielt auf den Namen aller Elemente auf der Seite ab. Normalerweise wird es bei CSS-Resets verwendet. Das Folgende setzt die Auffüllung und den Rand jedes Elements zurück.
Sie können dies weiterführen und einige wirklich interessante Ergebnisse erzielen. Zum Beispiel dreht sich folgendes jeden Element innerhalb eines div-roten Elements, das Elemente wie Links einschließt, deren Standardfarbe auf etwas anderes eingestellt ist und nicht durch einfaches Targeting des div beeinflusst wird.
Außerdem zielt dieses Snippet auf Enkelabschnitte des div ab, nicht jedoch auf direkte untergeordnete Absätze.
Sie können dies so weit gehen, wie Sie möchten. Die folgenden Ziele richten sich an die Urenkel des Div. Diese Verkettungsmethode wird häufig in CSS-Debugging-Tricks verwendet.
Arbitrary Substring Attributwertauswahl
Mit CSS3 kann das Sternchen jetzt auch verwendet werden, um den Attributwert-Selektor für beliebige Zeichenketten zu implementieren. Sie können diesen Titel herausnehmen, wenn Sie mit anderen Entwicklern sprechen, wenn Sie versuchen, intelligent zu wirken.
Der folgende Code zielt auf ein beliebiges div mit dem Wort? Section? im Titel Es kann sein? Abschnitt3? oder? section-Four ?, spielt es keine Rolle, solange die angegebene Zeichenfolge verwendet wird, gelten die nachfolgenden Stile.
Dieser Code würde für gelten alle divs in diesem HTML:
Attribut-Selektoren
Der letzte Kurvenball, den ich Ihnen warf, war ein Beispiel für einen Attributselektor. In CSS3 sind Attributselektoren so kompliziert, dass sie ihren eigenen Artikel verdienen. Zum Glück für Sie haben wir einen Artikel zu diesem Thema.
CSS-Attributselektoren: Wie und warum sollten Sie diese verwenden?
Wenn Sie ein Nerd wie ich sind, ist dies ein wirklich faszinierendes Thema. Es ist erstaunlich, alle Auswahl-Tools zu sehen, die Ihnen zur Verfügung stehen.
Pseudoklassen-Selektoren
Dies ist ein weiteres Auswahlthema, mit dem Sie sich vertraut machen sollten, und es verdient wirklich eine gründliche Untersuchung des Themas. Wie bei fast jedem bekannten CSS-Thema haben Sie mit CSS-Tricks alles abgedeckt.
Treffen Sie die Pseudo-Klassenauswahl
Fazit
Mit CSS gibt es fast immer mehr als eine Möglichkeit, etwas anzuvisieren. In der Tat gibt es oft ein halbes Dutzend Möglichkeiten. Für jedes der oben genannten Beispiele können Sie wahrscheinlich einen schnelleren Weg angeben, um das Ziel zu erreichen, für das wir das Ziel hatten, aber wenn Sie sich mit dem DOM vertraut machen, werden diese Selektoren wirklich nützlich.
Selbst wenn Sie sich nie in Not befinden, ist es von entscheidender Bedeutung, sie wegen Ihnen zu verstehen werden Sehen Sie sich Projekte an, an denen Sie zusammenarbeiten, Frameworks, die Sie herunterladen, Tutorials, die Sie lesen, und jeden anderen Ort, an dem Sie regelmäßig Code finden. Wenn Sie HTML-Elementbeziehungen und die entsprechenden CSS-Selektoren verstehen, können Sie nur zu einem besseren Kodierer werden!