Jedes Mal, wenn wir CSS verwenden, verwenden wir Selektoren. Trotzdem gehören CSS-Selektoren zu den eher vernachlässigten Teilen der Spezifikation.
Wir sprechen über die großen Transformationen in CSS3, vergessen aber allzu oft die Grundlagen. Der gute Einsatz von Selektoren macht unser tägliches Codieren einfacher und eleganter. Heute werde ich auf die 10 Selektoren eingehen, die uns oft in den Sinn kommen, aber sie sind sowohl effektiv als auch sehr nützlich.
Der * Selektor ist vielleicht derjenige, an den Sie sich am besten erinnern, aber er wird oft zu wenig genutzt. Was es tut, ist alles auf der Seite zu stylen und es ist großartig für das Erstellen eines Reset und auch für das Erstellen einiger Seitenstandards wie die Schriftfamilie und Größe, die Sie haben möchten.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Dieser Selektor wird als angrenzender Selektor bezeichnet, und was er tut, wählt das Element aus, das unmittelbar nach dem ersten Element ist. Wenn Sie das erste Div nach unserem Header auswählen möchten, geben Sie Folgendes ein:
header + div {margin-top: 50px;}Dieser Selektor wählt im Gegensatz zu AB nur die direkten Kinder, die untergeordnete Elemente von A auswählen . Dieser Selektor wird empfohlen, wenn Sie mit untergeordneten Elementen der ersten Ebene eines übergeordneten Elements arbeiten. Wenn Sie beispielsweise Listenelemente der ersten Ebene in einer ungeordneten Liste auswählen möchten, die wie folgt aussieht:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Sie würden diesen Selektor verwenden, da der normale AB- Selektor auch die Listenelemente innerhalb der verschachtelten ungeordneten Liste auswählt
ul > li {background: black;color: white;}Dies ist ein wirklich guter Selektor, wenn Sie einen bestimmten Link auf eine andere Art und Weise stylen wollen, was auch immer in Anführungszeichen steht, wird mit dem href des Links verglichen. Um zum Beispiel alle Links zu Facebook mit der Farbe blau zu gestalten, die Sie verwenden würden:
a[href*="facebook"] {color: blue;}Es gibt auch eine Version ohne *, die der genauen URL entspricht, die Sie für exakte Links verwenden können.
Dieser Selektor ist besonders nützlich, da er eine Negationsklausel enthält, mit der Sie eine beliebige Gruppe von Elementen auswählen können, die nicht dem entsprechen, was Sie in B platziert haben. Wenn Sie alle Divs mit Ausnahme der Fußzeile auswählen möchten, die Sie benötigen:
div:not(.footer) {margin-bottom: 40px;}Mit dem ersten und letzten Kind können wir das erste und letzte Kind des Elternelements auswählen. Dies kann eine große Hilfe sein, wenn es darum geht, Elemente aufzulisten und das Randrecht oder die Ränder zu entfernen. Um den Rahmen im ersten Listenelement und den Rand im letzten Listenelement zu entfernen, benötigen Sie:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Das n-te Kind ist eine einfache Möglichkeit für Sie, jedes Kind eines Elements nach seiner Reihenfolge auszuwählen. Wenn Sie zum Beispiel das dritte Listenelement in einer ungeordneten Liste haben möchten, wäre dies der richtige Weg:
ul li:nth-child(3) {background: #ccc;}Wir können nth-child verwenden, um jeden Multiplikator einer Zahl auszuwählen, indem wir die Variable n verwenden, zum Beispiel, wenn wir 3n setzen, würde es die Listenelementnummer 3, 6, 9, 12 usw. auswählen.
Das n-te-letzte-Kind funktioniert wie das n-te Kind, aber anstatt das erste Listenelement zu zählen, beginnt es mit dem letzten zu zählen. Wenn Sie es also mit der zweiten verwenden, wird das Listenelement vor dem letzten ausgewählt seine Verwendung ist genau wie der N-Kind-Selektor:
ul li:nth-last-child(2) {background: #ccc;}Dieser Selektor macht genau das, was er zu tun glaubt; Es sieht, welchen Typ von Element Sie darauf platziert haben, und es wählt zum Beispiel das dritte Element auf Ihrer Seite aus, das Ihrer Eingabe entspricht. Für die Auswahl des dritten Absatzes in einem Div würden Sie verwenden:
div p:nth-of-type(3) {font-style: italic;}Ist Ihnen schon mal aufgefallen, dass die Seiten, die Sie bereits gesehen haben, in einer anderen Farbe erscheinen, wenn Sie nach etwas suchen? Das ist genau das, was besucht wird. Dies ist eine großartige Ergänzung für die Benutzer, aber es ist manchmal vergessen und nach meiner Erfahrung ist es nützlich, jedes Mal, wenn ich google suche.
a:visited {color: blue;}Meiner Erfahrung nach kann die Verwendung dieser Arten von Selektoren beim Codieren uns eine Menge Zeit sparen und auch vermeiden, dass viele IDs unser Markup überladen. Und das ist nur der Anfang von CSS-Selektoren, es gibt viele weitere Selektoren, die wirklich praktisch sind, aber manchmal vergessen werden.
Verwenden Sie CSS-Selektoren in Ihren Stylesheets? Ist es einfacher, auf IDs und Klassen zurückzugreifen? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Codebild über Shutterstock.