Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Die 30 CSS-Selektoren, die Sie sich merken müssen

Read Time: 17 mins
This post is part of a series called CSS3 Mastery.
10 CSS3 Properties You Need to Be Familiar With
Getting to Work with CSS3 Power Tools

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Sie haben also die Basis-id, die class und die descendant Selektoren gelernt - und dann Feierabend gemacht? Dann verpassen Sie ein enormes Maß an Flexibilität. Während viele der in diesem Artikel erwähnten Selektoren Teil der CSS3-Spezifikation sind und folglich nur in modernen Browsern verfügbar sind, schulden Sie es sich selbst, sich diese zu merken.

1. *

Lassen Sie uns die offensichtlichen für Anfänger ausschalten, bevor wir zu den fortgeschritteneren Selektoren übergehen.

Das Sternsymbol zielt auf jedes einzelne Element auf der Seite ab. Viele Entwickler werden diesen Trick verwenden, um margin und padding auf Null zu setzen. Während dies für schnelle Tests sicherlich in Ordnung ist, würde ich Ihnen raten, dies niemals im produktiven Code zu verwenden. Es fügt dem Browser zu viel Gewicht hinzu und ist unnötig.

Das * kann auch mit untergeordneten Selektoren verwendet werden.

Dadurch wird jedes einzelne Element als untergeordnetes Element des #container div. Versuchen Sie erneut, diese Technik nicht sehr oft zu verwenden, wenn überhaupt.

Demo ansehen

Kompatibilität

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

Wenn wir das Hash-Symbol einem Selektor voranstellen, können wir auf die id zielen. Dies ist leicht die häufigste Verwendung, aber seien Sie vorsichtig, wenn Sie id-Selektoren verwenden.

Fragen Sie sich: Muss ich unbedingt eine id auf dieses Element anwenden, um es als Ziel zu verwenden?

id-Selektoren sind starr und erlauben keine Wiederverwendung. Wenn möglich, versuchen Sie zuerst, einen Tag-Namen, eines der neuen HTML5-Elemente oder sogar eine Pseudoklasse zu verwenden.

Demo ansehen

Kompatibilität

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. . X

Dies ist ein class-Selektor. Der Unterschied zwischen id und class besteht darin, dass Sie mit letzteren mehrere Elemente ansprechen können. Verwenden Sie Klassen, wenn das Styling auf eine Gruppe von Elementen angewendet werden soll. Alternativ können Sie ids verwenden, um eine Nadel im Heuhaufen zu finden, und nur dieses bestimmte Element formatieren.

Demo ansehen

Kompatibilität

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

Der nächsthäufigste Selector ist der descendant Selektor. Wenn Sie mit Ihren Selektoren spezifischer sein müssen, verwenden Sie diese. Was wäre beispielsweise, wenn Sie, anstatt alle Anker-Tags anzusprechen, nur auf die Anker abzielen müssen, die sich in einer ungeordneten Liste befinden? Dies ist insbesondere dann der Zeitpunkt, an dem Sie eine untergeordnete Auswahl verwenden würden.

Pro-Tipp - Wenn Ihr Selektor wie X Y Z A B.error aussieht, machen Sie es falsch. Fragen Sie sich immer, ob es absolut notwendig ist, all dieses Gewicht anzuwenden.

Demo ansehen

Kompatibilität

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

Was ist, wenn Sie alle Elemente auf einer Seite nach ihrem Typ und nicht nach einer id oder einem Klassennamen ansprechen möchten? Halten Sie es einfach und verwenden Sie eine Typauswahl. Wenn Sie alle nicht geordneten Listen als Ziel verwenden müssen, verwenden Sie ul {}.

Demo ansehen

Kompatibilität

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited und X:link

Wir verwenden die :link-Pseudoklasse, um alle Anker-Tags anzusprechen, die noch nicht angeklickt wurden.

Alternativ haben wir auch die Pseudoklasse :visited, die, wie Sie erwartet haben, es uns ermöglicht, nur die Anker-Tags auf der Seite, auf die geklickt oder besucht wurde, ein bestimmtes Styling anzuwenden.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

Dies wird als benachbarter Selektor bezeichnet. Es wird nur das Element ausgewählt, dem das erste Element unmittelbar vorangestellt ist. In diesem Fall hat nur der erste Absatz nach jedem ul roten Text.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

Der Unterschied zwischen dem Standard-X Y und X > Y besteht darin, dass letzterer nur direkt untergeordnete Elemente auswählt. Betrachten Sie beispielsweise das folgende Markup.

Ein Selektor von #container > ul zielt nur auf die uls ab, die direkte untergeordnete Kinder des div mit der id container sind. Es zielt beispielsweise nicht auf das ul ab, das ein Kind des ersten li ist.

Aus diesem Grund gibt es Leistungsvorteile bei der Verwendung des Kinderkombinators. In der Tat wird es besonders empfohlen, wenn Sie mit JavaScript-basierten CSS-Selektor-Engines arbeiten.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

Dieser Geschwisterkombinator ähnelt X + Y, ist jedoch weniger streng. Während ein benachbarter Selektor (ul + p) nur das erste Element auswählt, dem der frühere Selektor unmittelbar vorausgeht, ist dieses Element allgemeiner. Es wählt unter Bezugnahme auf unser obiges Beispiel alle p-Elemente aus, solange sie einem ul folgen.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[Titel]

In unserem obigen Beispiel als Attributauswahl bezeichnet, werden nur die Anker-Tags ausgewählt, die ein title-Attribut haben. Anker-Tags, die dies nicht tun, erhalten dieses spezielle Styling nicht. Aber was ist, wenn Sie genauer sein müssen? Nun...

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

Das obige Snippet formatieren alle Anker-Tags, die auf https://net.tutsplus.com verweisen; sie erhalten unsere grüne Markenfarbe. Alle anderen Anker-Tags bleiben davon unberührt.

Beachten Sie, dass wir den Wert in Anführungszeichen setzen. Denken Sie daran, dies auch zu tun, wenn Sie eine JavaScript-CSS-Selektor-Engine verwenden. Wenn möglich, ziehen Sie CSS3-Selektoren immer inoffiziellen Methoden vor.

Das funktioniert gut, ist aber etwas starr. Was ist, wenn der Link tatsächlich zu Nettuts + führt, aber vielleicht ist der Pfad nettuts.com und nicht die vollständige URL? In diesen Fällen können wir ein wenig von der Syntax der regulären Ausdrücke verwenden.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

Los geht's; das ist es, was wir brauchen. Der Stern gibt an, dass der folgende Wert irgendwo im Wert des Attributs erscheinen muss. Auf diese Weise deckt dies nettuts.com, net.tutsplus.com und sogar tutsplus.com ab.

Denken Sie daran, dass dies eine breite Aussage ist. Was ist, wenn das Anker-Tag mit einer Nicht-Envato-Site mit der Zeichenfolge tuts in der URL verknüpft ist? Wenn Sie genauer sein müssen, verwenden Sie ^ und $, um auf den Anfang bzw. das Ende einer Zeichenfolge zu verweisen.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

Haben Sie sich jemals gefragt, wie einige Websites in der Lage sind, ein kleines Symbol neben den externen Links anzuzeigen? Ich bin sicher, Sie haben diese schon einmal gesehen; sie sind nette Erinnerungen, dass der Link Sie zu einer völlig anderen Website führt.

Dies ist ein Kinderspiel mit dem Karat-Symbol. Es wird am häufigsten in regulären Ausdrücken verwendet, um den Anfang einer Zeichenfolge zu bezeichnen. Wenn wir alle Anker-Tags ansprechen möchten, die ein href haben, das mit http beginnt, können wir einen Selektor ähnlich dem oben gezeigten Snippet verwenden.

Beachten Sie, dass wir nicht nach https:// suchen. Das ist unnötig und berücksichtigt nicht die URLs, die mit https:// beginnen.

Nun, was wäre, wenn wir stattdessen alle Anker formatieren wollten, die beispielsweise auf ein Foto verweisen? In diesen Fällen suchen wir nach dem Ende der Zeichenfolge.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

Auch hier verwenden wir ein Symbol für reguläre Ausdrücke, $, um auf das Ende einer Zeichenfolge zu verweisen. In diesem Fall suchen wir nach allen Ankern, die auf ein Bild verweisen - oder zumindest nach einer URL, die mit .jpg endet. Denken Sie daran, dass dies sicherlich nicht für gifs und PNGs funktioniert.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*="foo"]

Verweisen Sie auf Nummer acht; wie kompensieren wir all die verschiedenen Bildtypen: png, jpeg, jpg, gif? Nun, wir könnten mehrere Selektoren erstellen, wie zum Beispiel:

Aber das ist mühsam und ineffizient. Eine weitere mögliche Lösung ist die Verwendung benutzerdefinierter Attribute. Was wäre, wenn wir jedem Anker, der mit einem Bild verknüpft ist, unser eigenes data-filetype-Attribut hinzufügen würden?

Wenn dieser Haken vorhanden ist, können wir dann einen Standardattributselektor verwenden, um nur diese Anker anzusprechen.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~="bar"]

Hier ist ein besonderer Selektor, der Ihre Freunde beeindrucken wird. Nicht allzu viele Leute wissen von diesem Trick. Das Tilde-Symbol (~) ermöglicht es uns, ein Attribut anzusprechen, das eine durch Abstand getrennte Liste von Werten aufweist.

In Verbindung mit unserem benutzerdefinierten Attribut aus Nummer fünfzehn oben könnten wir ein data-info-Attribut erstellen, das eine durch Leerzeichen getrennte Liste von allem erhalten kann, was wir notieren müssen. In diesem Fall notieren wir uns externe Links und Links zu Bildern - nur für das Beispiel.

Mit diesem Markup können wir jetzt alle Tags mit einem dieser Werte ansprechen, indem wir den ~-Attributauswahltrick verwenden.

Ziemlich raffiniert, nicht wahr?

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:geprüft

Diese Pseudoklasse zielt nur auf ein Benutzeroberflächenelement ab, das aktiviert wurde - z. B. ein Optionsfeld oder ein Kontrollkästchen. So einfach ist das.

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

Die before- und after-Pseudoklassen sind der Hammer. Jeden Tag, so scheint es, finden die Menschen neue und kreative Wege, um sie effektiv zu nutzen. Sie generieren einfach Inhalte rund um das ausgewählte Element.

Viele wurden zum ersten Mal in diese Klassen eingeführt, als sie auf den Clear-Fix-Hack stießen.

Dieser Hack verwendet die :after-Pseudoklasse, um ein Leerzeichen nach dem Element anzuhängen und es dann zu clearen. Es ist ein ausgezeichneter Trick, den Sie in Ihrer Werkzeugtasche haben sollten, insbesondere in den Fällen, in denen die overflow: hidden; Methode nicht möglich ist.

Für eine weitere kreative Verwendung davon lesen Sie meinen kurzen Tipp zum Erstellen von Schatten.

Gemäß der CSS3 Selectors-Spezifikation sollten Sie technisch die Pseudoelementsyntax von zwei Doppelpunkten verwenden ::. Um jedoch kompatibel zu bleiben, akzeptiert der Benutzeragent auch eine Verwendung mit einem einzigen Doppelpunkt. Tatsächlich ist es an dieser Stelle klüger, die Version mit nur einem Doppelpunkt in Ihren Projekten zu verwenden.

Kompatibilität

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:Hover

Oh, kommen Sie schon. Sie kennen diesen. Der offizielle Begriff dafür ist user action pseudo class. Es klingt verwirrend, ist es aber wirklich nicht. Möchten Sie bestimmte Stile anwenden, wenn ein Benutzer den Mauszeiger über ein Element bewegt? Damit ist die Arbeit erledigt!

Beachten Sie, dass ältere Versionen von Internet Explorer nicht reagieren, wenn die :hover-Pseudoklasse auf etwas anderes als ein Ankertag angewendet wird.

Sie verwenden diese Auswahl am häufigsten, wenn Sie z. B. einen border-bottom auf Anker-Tags anwenden, wenn Sie den Mauszeiger darüber bewegen.

Pro-Tipp - border-bottom: 1px solid black; sieht besser aus als text-decoration:unterline;.

Kompatibilität

  • IE6+ (In IE6 muss :hover auf ein Ankerelement angewendet werden)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(Selektor)

Besonders hilfreich ist die Negations-Pseudoklasse. Nehmen wir an, ich möchte alle divs auswählen, mit Ausnahme desjenigen, der eine id von container hat. Das obige Snippet wird diese Aufgabe perfekt bewältigen.

Oder, wenn ich jedes einzelne Element (nicht empfohlen) außer Absatz-Tags auswählen wollte, könnten wir Folgendes tun:

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

Wir können Pseudoelemente verwenden (bezeichnet durch ::), um Fragmente eines Elements, z. B. die erste Zeile oder den ersten Buchstaben, zu formatieren. Beachten Sie, dass diese auf Elemente auf Blockebene angewendet werden müssen, um wirksam zu werden.

Ein Pseudoelement besteht aus zwei Doppelpunkten: ::

Auf den ersten Buchstaben eines Absatzes abzielen

Dieser Codeausschnitt ist eine Abstraktion, die alle Absätze auf der Seite findet und dann nur den ersten Buchstaben dieses Elements auswählen wird.

Dies wird am häufigsten verwendet, um zeitungsähnliches Styling für den ersten Buchstaben eines Artikels zu erstellen.

Auf die ersten Zeile eines Absatzes zielen

In ähnlicher Weise wird das Pseudoelement ::first-line erwartungsgemäß nur die erste Zeile des Elements formatieren.

"Aus Gründen der Kompatibilität mit vorhandenen Stylesheets müssen Benutzeragenten auch die vorherige Ein-Doppelpunkt-Notation für Pseudoelemente akzeptieren, die in den CSS-Ebenen 1 und 2 eingeführt wurden (nämlich :first-line, :first-letter, :before und :after). Diese Kompatibilität ist für die neuen Pseudoelemente, die in dieser Spezifikation eingeführt wurden, nicht zulässig." - Quelle

Demo ansehen

Kompatibilität

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

Erinnern Sie sich an die Tage, als wir keine Möglichkeit hatten, bestimmte Elemente in einem Stack anzusprechen? Die nth-child-Pseudoklasse löst das!

Bitte beachten Sie, dass nth-child eine ganze Zahl als Parameter akzeptiert, diese jedoch nicht nullbasiert ist. Wenn Sie auf das zweite Listenelement abzielen möchten, verwenden Sie li:nth-child(2).

Wir können dies sogar verwenden, um einen variablen Satz von Kindern auszuwählen. Zum Beispiel könnten wir li:nth-child(4n) verwenden, um jedes vierte Listenelement auszuwählen.

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

Was wäre, wenn Sie eine riesige Liste von Elementen in einem ul hätten und nur auf das dritte bis letzte Element zugreifen müssten? Anstatt li:nth-child(397) zu verwenden, könnten Sie stattdessen die Pseudoklasse nth-last-child verwenden.

Diese Technik funktioniert fast identisch von Nummer sechzehn oben, aber der Unterschied ist, dass sie am Ende der Sammlung beginnt und sich zurückarbeitet.

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

Es wird Zeiten geben, in denen Sie, anstatt ein Kind (child) auszuwählen, stattdessen nach dem Typ (type) des Elements auswählen müssen.

Stellen Sie sich ein Markup vor, das fünf ungeordnete Listen enthält. Wenn Sie nur die dritte ul formatieren möchten und keine eindeutige id zum Ansprechen haben, können Sie die Pseudoklasse nth-of-type(n) verwenden. Im obigen Snippet hat nur das dritte ul einen Rahmen um ihn herum.

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

Und ja, um konsistent zu bleiben, können wir auch nth-last-of-type verwenden, um am Ende der Selektorliste zu beginnen und uns zurückzuarbeiten, um das gewünschte Element anzusprechen.

Kompatibilität

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

Diese strukturelle Pseudoklasse ermöglicht es uns, nur das erste untergeordnete Element des übergeordneten Elements des Elements anzusprechen. Sie verwenden dies häufig, um Rahmen aus den ersten und letzten Listenelementen zu entfernen.

Angenommen, Sie haben eine Liste von Zeilen, und jede hat einen border-top und einen border-bottom. Nun, mit dieser Anordnung wird der erste und letzte Gegenstand in diesem Set etwas seltsam aussehen.

Viele Designer wenden Klassen von first und last an, um dies zu kompensieren. Stattdessen können Sie diese Pseudoklassen verwenden.

Demo ansehen

Kompatibilität

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

Das Gegenteil von first-child, zielt last-child auf das letzte Element des übergeordneten Elements des Elements ab.

Beispiel

Lassen Sie uns ein einfaches Beispiel erstellen, um eine mögliche Verwendung dieser Klassen zu veranschaulichen. Wir erstellen ein gestaltetes Listenelement.

Markup

Nichts Besonderes; nur eine einfache Liste.

CSS

Dieses Styling legt einen Hintergrund fest, entfernt das Browser-Standard-Padding des ul und wendet Rahmen auf jedes li an, um ein wenig Tiefe zu bieten.

Styled ListStyled ListStyled List

Um Ihren Listen Tiefe zu verleihen, wenden Sie auf jedes li,  ein border-bottom an, das ein oder zwei Schattierungen dunkler ist als die Hintergrundfarbe des li. Als nächstes wenden Sie ein border-top an, das ein paar Schattierungen heller ist.

Das einzige Problem, wie in der Abbildung oben gezeigt, ist, dass ein Rahmen ganz oben und unten in der ungeordneten Liste angewendet wird - was seltsam aussieht. Lassen Sie uns die Pseudoklassen :first-child und :last-child verwenden, um dies zu beheben.

FixedFixedFixed

Das wärs; das behebt es!

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

Yep - IE8 unterstützt :first-child, aber nicht :last-child. Stellen Sie sich das mal vor.

28. X:only-child

Ehrlich gesagt, werden Sie wahrscheinlich nicht allzu oft die only-child-Pseudoklasse verwenden. Nichtsdestotrotz ist es verfügbar, falls Sie es brauchen.

Es ermöglicht Ihnen, Elemente anzusprechen, die das einzige untergeordnete Element des übergeordneten Elements sind. Wenn Sie beispielsweise auf das obige Snippet verweisen, wird nur der Absatz, der das einzige untergeordnete Kind des div ist, rot eingefärbt.

Nehmen wir das folgende Markup an.

In diesem Fall werden die Absätze des zweiten div nicht als Ziel bezeichnet. nur die des ersten div. Sobald Sie mehr als ein Untergeordnetes Element auf ein Element anwenden, wird die only-child-Pseudoklasse nicht mehr wirksam.

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

Diese strukturelle Pseudoklasse kann auf clevere Weise verwendet werden. Es zielt auf Elemente ab, die keine Geschwister in seinem übergeordneten Container haben. Lassen Sie uns beispielsweise alle uls als Ziel verwenden, die nur ein einziges Listenelement haben.

Fragen Sie sich zunächst, wie Sie diese Aufgabe erfüllen würden? Sie könnten ul li versuchen, aber dies würde auf alle Listenelemente abzielen. Die einzige Lösung besteht darin, only-of-type zu verwenden.

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X: first-of-type

Mit der Pseudoklasse first-of-type können Sie die ersten Geschwister ihres Typs auswählen.

Ein Test

Um dies besser zu verstehen, lassen Sie uns einen Test machen. Kopieren Sie das folgende Markup in Ihren Code-Editor:

Versuchen Sie nun, ohne weiter zu lesen, herauszufinden, wie Sie nur "Listenelement 2" anvisieren können. Wenn Sie es herausgefunden haben (oder aufgegeben haben), lesen Sie weiter.

Lösung 1

Es gibt eine Vielzahl von Möglichkeiten, diesen Test zu lösen. Wir werden eine Handvoll von ihnen betrachten. Beginnen wir mit der Verwendung von first-of-type.

Dieses Snippet sagt im Wesentlichen: "Suchen Sie die erste ungeordnete Liste auf der Seite und finden Sie dann nur die unmittelbaren untergeordneten Elemente, bei denen es sich um Listenelemente handelt. Filtern Sie dies als Nächstes auf das zweite Listenelement in diesem Satz.

Lösung 2

Eine weitere Möglichkeit ist die Verwendung des benachbarten Selektors.

In diesem Szenario finden wir das ul, das sofort auf das p-Tag folgt, und finden dann das allerletzte untergeordnete Element des Elements.

Lösung 3

Wir können mit diesen Selektoren so unausstehlich oder so verspielt sein, wie wir wollen.

Dieses Mal schnappen wir uns das erste ul auf der Seite und finden dann das allererste Listenelement, aber von unten beginnend! :)

Demo ansehen

Kompatibilität

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

Schlussfolgerung

Wenn Sie für ältere Browser wie Internet Explorer 6 kompensieren, müssen Sie bei der Verwendung dieser neueren Selektoren dennoch vorsichtig sein. Aber bitte lassen Sie sich davon nicht davon abhalten, diese zu lernen. Sie würden sich selbst einen großen Bärendienst erweisen. Eine Liste der Browser-Kompatibilität finden Sie hier. Alternativ können Sie Dean Edwards hervorragendes IE9.js Skript verwenden, um ältere Browser mit Unterstützung für diese Selektoren zu unterstützen.

Zweitens, wenn Sie mit JavaScript-Bibliotheken wie dem beliebten jQuery arbeiten, versuchen Sie immer, diese nativen CSS3-Selektoren über die benutzerdefinierten Methoden / Selektoren der Bibliothek zu verwenden, wenn möglich. Dadurch wird Ihr Code schneller, da die Selektor-Engine die native Analyse des Browsers anstelle der eigenen verwenden kann.

Danke fürs Lesen, und ich hoffe, sie haben den einen oder anderen Trick mitgenommen!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.