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

CSS lernen: Der vollständige Leitfaden

Wir haben einen vollständigen Leitfaden erstellt, der Ihnen beim Erlernen von CSS hilft, unabhängig davon, ob Sie gerade erst mit den Grundlagen beginnen oder fortgeschritteneres CSS erkunden möchten.

CSS-Selektoren

Sie haben also die Basis—Selektoren id, class und descendant gelernt – und es dann einen Tag genannt? Wenn ja, verpassen Sie ein enormes Maß an Flexibilität. Sie sind es sich selbst schuldig, diese erweiterten CSS- und CSS3-Selektoren in den Speicher zu schreiben.

Grundlegende Selektoren

1. *

* { margin: 0; padding: 0;}

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 die margin s und padding auf Null zu setzen. Während dies sicherlich für schnelle Tests in Ordnung ist, würde ich Ihnen raten, dies niemals im Produktionscode zu verwenden. Es fügt dem Browser zu viel Gewicht hinzu und ist unnötig.

Der * kann auch mit untergeordneten Selektoren verwendet werden.

#container * { border: 1px solid black;}

Dies zielt auf jedes einzelne Element ab, das ein Kind von #container div ist. Versuchen Sie erneut, diese Technik nicht sehr häufig anzuwenden, wenn überhaupt.

2. #X

#container { width: 960px; margin: auto;}

Wenn wir das Hash-Symbol einem Selektor voranstellen, können wir mit id zielen. Seien Sie jedoch vorsichtig, wenn Sie id -Selektoren verwenden.

Fragen Sie sich: Muss ich unbedingt ein id auf dieses Element anwenden, um es anzuvisieren?

id Selektoren sind starr und können nicht wiederverwendet werden. Wenn möglich, versuchen Sie zunächst, einen Tag-Namen, eines der neuen HTML5-Elemente oder sogar eine Pseudoklasse zu verwenden.

3. .X

.error { color: red;}

Dies ist ein class Selektor. Der Unterschied zwischen ids und classes besteht darin, dass Sie mit letzterem auf mehrere Elemente abzielen können. Verwenden Sie classes, wenn Ihr Styling auf eine Gruppe von Elementen angewendet werden soll. Verwenden Sie alternativ ids , um eine Nadel im Heuhaufen zu finden, und stylen Sie nur dieses bestimmte Element.

4. X

a { color: red; }ul { margin-left: 0; }

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

Live-Demo der grundlegenden Selektoren

Kombinator-Selektoren

5. X Y

li a { text-decoration: none;}

Der nächsthäufigste Selektor ist der descendant Selektor. Wenn Sie mit Ihren Selektoren genauer sein müssen, verwenden Sie diese. Was ist beispielsweise, wenn Sie nicht auf alle Anker-Tags abzielen, sondern nur auf die Anker, die sich in einer ungeordneten Liste befinden? Dies ist insbesondere dann der Fall, wenn Sie einen Nachkommen-Selektor verwenden.

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.

6. X + Y

ul + p { color: red;}

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

7. X > Y

div#container > ul { border: 1px solid black;}

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

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

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

Aus diesem Grund gibt es Leistungsvorteile bei der Verwendung des untergeordneten Kombinators. In der Tat ist es besonders empfehlenswert, wenn Sie mit JavaScript-basierten CSS-Selektor-Engines arbeiten.

8. X ~ Y

ul ~ p { color: red;}

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 dieser verallgemeinerter. In unserem obigen Beispiel werden alle p -Elemente ausgewählt, solange sie einem ul folgen.

Live-Demo von Kombinator-Selektoren

Attribut-Selektoren

9. X

a { color: green;}

In unserem obigen Beispiel wird dies als Attributselektor bezeichnet und wählt nur die Anker-Tags aus, die ein title -Attribut haben. Anker-Tags, die dies nicht tun, erhalten dieses spezielle Styling nicht. Aber was, wenn Sie genauer sein müssen? Schauen Sie sich das nächste Beispiel an!

10. X

a { color: #83b348; /* Envato green */}

Das obige Snippet formatiert alle Anker-Tags, die auf https://code.tutsplus.com verlinken; 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, verwenden Sie immer CSS3-Selektoren über inoffizielle Methoden.

Das funktioniert gut, obwohl es ein bisschen starr ist. Was ist, wenn der Link tatsächlich zu Envato Tuts + führt, aber vielleicht ist der Pfad code.tutsplus.com anstelle der vollständigen URL? In diesen Fällen können wir ein wenig von der Syntax regulärer Ausdrücke verwenden.

11. X

a { color: #83b348; /* Envato green */}

Los geht’s; das brauchen wir. Der Stern gibt an, dass der entsprechende Wert irgendwo im Wert des Attributs erscheinen muss. Auf diese Weise deckt dies tutsplus.com, code.tutsplus.com, und sogar webdesign.tutsplus.com .

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

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Haben Sie sich jemals gefragt, wie einige Websites ein kleines Symbol neben den externen Links anzeigen können? Ich bin sicher, Sie haben diese schon einmal gesehen; Sie sind nette Erinnerungen daran, dass der Link Sie zu einer ganz 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 anzugeben. Wenn wir auf alle Anker-Tags abzielen möchten, die ein href haben, das mit http beginnt, können wir einen Selektor verwenden, der dem oben gezeigten Snippet ähnelt.

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

Was wäre, wenn wir stattdessen alle Anker stylen würden, die beispielsweise auf ein Foto verlinken? In diesen Fällen suchen wir nach dem Ende der Zeichenfolge.

13. X

a { color: red;}

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 verlinken – oder zumindest nach einer URL, die mit .jpg endet. Beachten Sie, dass dadurch keine GIF- und PNG-Bilder erfasst werden.

14. X

a { color: red;}

Wie kompensieren wir alle verschiedenen Bildtypen? Nun, wir könnten mehrere Selektoren erstellen, wie zum Beispiel:

a,a,a,a { color: red;}

Aber das ist ein Schmerz, und es ist ineffizient. Eine andere mögliche Lösung ist die Verwendung benutzerdefinierter Attribute. Was wäre, wenn wir jedem Anker, der auf ein Bild verweist, ein eigenes data-filetype -Attribut hinzufügen würden?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Dann können wir mit diesem Haken einen Standardattributselektor verwenden, um nur diese Anker anzuvisieren.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Hier ist ein besonderer, der deine Freunde beeindrucken wird. Nicht viele Leute kennen diesen Trick. Mit dem Tilde-Symbol (~) können wir auf ein Attribut abzielen, das eine durch Leerzeichen getrennte Liste von Werten enthält.

Zusammen mit unserem benutzerdefinierten Attribut aus Nummer 15 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.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

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

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

Ziemlich raffiniert, was?

Live-Demo von Attributselektoren

Pseudoselektoren

16. X: besucht und X:link

a:link { color: red; }a:visited { color: purple; }

Wir verwenden die Pseudoklasse :link, um auf alle Anker-Tags abzuzielen, auf die noch geklickt werden muss.

Alternativ haben wir auch die Pseudoklasse :visited, mit der wir erwartungsgemäß nur die Ankertags auf der Seite, auf die geklickt oder „besucht“ wurde, mit einem bestimmten Stil versehen können.

17. X:checked

input:checked { border: 1px solid black;}

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

18. X: Nach

sind die Pseudoklassen before und after großartig. Es scheint, dass die Menschen jeden Tag neue und kreative Wege finden, sie effektiv einzusetzen. Sie generieren einfach Inhalte um das ausgewählte Element herum.

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

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

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

Eine weitere kreative Verwendung finden Sie in meinem kurzen Tipp zum Erstellen von Schatten.

Gemäß der CSS3-Selektorspezifikation sollten Sie technisch die Pseudoelementsyntax zweier Doppelpunkte :: . Um jedoch kompatibel zu bleiben, akzeptiert der Benutzeragent auch die Verwendung eines einzelnen Doppelpunkts.

19. X:hover

div:hover { background: #e3e3e3;}

Oh komm schon. Du kennst diesen. Der offizielle Begriff dafür ist „user action pseudo class“. Es klingt verwirrend, ist es aber nicht. Möchten Sie ein bestimmtes Styling anwenden, wenn ein Benutzer mit der Maus über ein Element fährt? Dies wird die Arbeit erledigen!

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

Sie verwenden diesen Selektor am häufigsten, wenn Sie beispielsweise einen border-bottom anwenden, um Tags zu verankern, wenn Sie mit der Maus darüber fahren.

a:hover { border-bottom: 1px solid black;}

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

20. X: nicht (Selektor)

div:not(#container) { color: blue;}

Die Negation Pseudo-Klasse ist besonders hilfreich. Angenommen, ich möchte alle div auswählen, mit Ausnahme derjenigen, die die ID container . Das obige Snippet wird diese Aufgabe perfekt bewältigen.

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

*:not(p) { color: green;}

21. X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

Wir können Pseudoelemente (bezeichnet mit ::) verwenden, um Fragmente eines Elements wie 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: ::

Zielen Sie auf den ersten Buchstaben eines Absatzes

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Dieses Snippet ist eine Abstraktion, die alle Absätze auf der Seite findet und dann nur den ersten Buchstaben dieses Elements als Unterziel verwendet.

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

Target die erste Zeile eines Absatzes

p::first-line { font-weight: bold; font-size: 1.2em;}

In ähnlicher Weise wird das ::first-line Pseudoelement wie erwartet 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 wurde (nämlich, :first-line, :first-letter, :before und :after). Diese Kompatibilität ist für die in dieser Spezifikation eingeführten neuen Pseudoelemente nicht zulässig.“-W3C Selektoren Specs

Live-Demo von Pseudo-Selektoren

N-te Kind und Typ Selektoren

22. X: n-te Kind(n)

li:nth-child(3) { color: red;}

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

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

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

23. X: n-te-letzte-Kind (n)

li:nth-last-child(2) { color: red;}

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

Diese Technik funktioniert fast identisch mit Nummer 16 oben. Der Unterschied besteht darin, dass es am Ende der Sammlung beginnt und sich zurückarbeitet.

24. X: n-ter Typ (n)

ul:nth-of-type(3) { border: 1px solid black;}

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

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

25. X: n-ter-letzter-Typ (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

Und ja, um konsistent zu bleiben, können wir auch nth-last-of-type , um am Ende der Selektorenliste zu beginnen und uns zurück zum Ziel des gewünschten Elements zu arbeiten.

26. X:first-child

ul li:first-child { border-top: none;}

Mit dieser strukturellen Pseudoklasse können wir nur auf das erste Kind des übergeordneten Elements abzielen. Sie verwenden dies häufig, um Rahmen von den ersten und letzten Listenelementen zu entfernen.

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

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

27. X:last-child

ul > li:last-child { color: green;}

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

last-child Selector Example

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

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

Für das Markup gibt es nichts Besonderes: nur eine einfache Liste.

Hier ist das CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

Dieses Styling legt einen Hintergrund fest, entfernt die Standardauffüllung des Browsers für ul und wendet Ränder für jedes li an, um ein wenig Tiefe zu erzielen.

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

Das einzige Problem, wie im obigen Bild gezeigt, ist, dass ganz oben und unten in der ungeordneten Liste ein Rahmen angewendet wird — was seltsam aussieht. Verwenden wir die Pseudoklassen :first-child und :last-child, um dies zu beheben.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

Los geht’s; das behebt es!

28. X:only-child

div p:only-child { color: red;}

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

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

Nehmen wir das folgende Markup an.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

In diesem Fall werden die Absätze des zweiten div nicht angesprochen. nur der erste div. Sobald Sie mehr als ein Kind auf ein Element anwenden, wird die Pseudoklasse only-child nicht mehr wirksam.

29. X:only-of-type

li:only-of-type { font-weight: bold;}

Diese strukturelle Pseudoklasse kann auf clevere Weise verwendet werden. Es zielt auf Elemente ab, die keine Geschwister in ihrem übergeordneten Container haben. Nehmen wir als Beispiel alle ul an, die nur ein einziges Listenelement haben.

Fragen Sie sich zunächst, wie Sie diese Aufgabe erfüllen würden. Sie könnten ul li , aber dies würde auf alle Listenelemente abzielen. Die einzige Lösung ist die Verwendung von only-of-type .

ul > li:only-of-type { font-weight: bold;}

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, machen wir einen Test. Kopieren Sie das folgende Markup in Ihren Code-Editor:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Versuchen Sie nun, ohne weiter zu lesen, herauszufinden, wie Sie nur auf „Listenelement 2“ abzielen. Wenn Sie es herausgefunden (oder aufgegeben) haben, lesen Sie weiter.

Lösung 1

Es gibt verschiedene Möglichkeiten, diesen Test zu lösen. Wir werden eine Handvoll von ihnen überprüfen. Beginnen wir mit first-of-type .

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Dieses Snippet sagt im Wesentlichen, um die erste ungeordnete Liste auf der Seite zu finden, dann finden Sie nur die unmittelbaren Kinder, die Listenelemente sind. Filtern Sie dies als Nächstes nur auf das zweite Listenelement in diesem Satz.

Lösung 2

Eine weitere Option ist die Verwendung des benachbarten Selektors.

p + ul li:last-child { font-weight: bold;}

In diesem Szenario finden wir das ul , das sofort mit dem p -Tag fortfährt, und finden dann das allerletzte Kind des Elements.

Lösung 3

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

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Dieses Mal greifen wir nach dem ersten ul auf der Seite und finden dann das allererste Listenelement, aber beginnend von unten!

Live-Demo von N-ten untergeordneten und Typselektoren

Fazit

Wenn Sie ältere Browser wie Internet Explorer 6 kompensieren, müssen Sie bei der Verwendung dieser neueren Selektoren dennoch vorsichtig sein. Aber bitte lassen Sie sich nicht davon abhalten, diese zu lernen. Du würdest dir selbst einen großen Bärendienst erweisen. Achten Sie darauf, hier für eine Browser-Kompatibilitätsliste zu verweisen. Alternativ können Sie Dean Edwards exzellenten IE9 verwenden.js-Skript zur Unterstützung dieser Selektoren für ältere Browser.

Zweitens sollten Sie bei der Arbeit mit JavaScript-Bibliotheken wie der beliebten jQuery immer versuchen, diese nativen CSS3-Selektoren nach Möglichkeit über die benutzerdefinierten Methoden / Selektoren der Bibliothek zu verwenden. Dadurch wird Ihr Code schneller, da die Selector Engine die native Analyse des Browsers anstelle der eigenen verwenden kann.

Es ist großartig, dass Sie Zeit damit verbringen, die Grundlagen des Webdesigns zu erlernen, aber wenn Sie eine schnelle Lösung benötigen, ist eine unserer gebrauchsfertigen CSS-Vorlagen möglicherweise eine gute Option. Wir haben auch ein paar Premium-CSS-Elemente für Sie zu prüfen.

• 
  CSS3
  15 elegante CSS-Preistabellen für Ihr neuestes Webprojekt
  Monty Shokeen
• 
  Bootstrap 4
  18 beste Bootstrap 4 Plugins
  Monty Shokeen

Kostenloser Zugriff auf Envato Elements für 1 Monat

Schließlich gibt es hier ein ganz besonderes Angebot, mit dem Sie professionell aussehende Websites und Apps erstellen können. Warum nutzen Sie nicht nur diese CSS-Selektoren, sondern auch hochwertige Fotos, Videomaterial, Premium-Schriftarten, Grafiken, Illustrationen und mehr?

Normalerweise müssten Sie für solche Ressourcen bezahlen. Aber jetzt können Sie einen ganzen Monat lang völlig kostenlos auf Millionen kreativer Assets für Ihre Codierungsprojekte zugreifen. Und was mehr ist, erhalten Sie unbegrenzte Downloads, so dass Sie so viel greifen können, wie Sie in diesem Monat wollen, und nur zahlen, wenn Sie sich entscheiden, um fortzufahren!

Um dieses Angebot zu nutzen, klicken Sie auf diesen speziellen Registrierungslink oder geben Sie den folgenden Code auf der Registrierungsseite ein:

elements_cont_tuts-freemonth1-4bwkbp

Warten Sie nicht zu lange — das Angebot gilt nur für eine begrenzte Zeit!