So ändern Sie ein Element mit CSS, wenn wir KEINE Klasse oder Kennung mit Pseudo-Klassen haben

Oft möchten Sie ein Element Ihrer Website mit CSS ändern, aber wenn Sie dies tun, stellen Sie fest, dass das Element keine Klasse oder Kennung hat.

Keine Sorge, es ist noch nicht alles verloren.

Dank der PseudoClasses können wir viel mehr tun, als Sie sich vorstellen, und in diesem Tutorial werden wir sehen, wie es geht.

Alles, was wir in diesem Tutorial sehen werden es funktioniert für jede Seite, die Sie mit HTML und CSS erstellen.

Und speziell gilt es natürlich für WordPress, tatsächlich werden wir es in unseren Beispielen in WordPress machen.

📺️ Video-Tutorial:

:first-of-type Nur erstes Element ändern

Diese Pseudoklasse ermöglicht es uns, nur das erste Element ihres Typs in einer Gruppe von Geschwisterelementen zu ändern.

Jetzt werden wir aber konkrete Beispiele sehen hier hast du hilfe sehr gut über diese Pseudoklasse.

Das erste, was wir ändern werden, ist das erste Element eines Menüs:

Wenn ich etwas ändern möchte, gehe ich normalerweise in den Elementinspektor meines Browsers (rechte Maustaste –> Prüfen) und überprüfe, ob das zu ändernde Element eine Klasse oder einen Bezeichner hat:

Das Element, das ich ändern möchte, hat einen bestimmten Bezeichner, sodass ich wirklich keine Pseudoklassen verwenden muss.

Aber stellen Sie sich vor, Sie haben es gesehen und ich weiß nicht, dass es eine Kennung hat 🙈

Ich werde dieses Element ändern, als ob dieser Bezeichner nicht existierte.

Um die Pseudoklassen zu verwenden, muss ich die Pseudoklasse mit vorangestelltem Doppelpunkt hinzufügen:

#top-menu li:first-of-type {
    margin-right: 140px;
}

Und das Ergebnis ist:

Wie wir im obigen Screenshot sehen können, wird nur der rechte Rand auf das erste Element angewendet.

:last-of-type Nur letztes Element ändern

Auf die gleiche Weise wie im vorherigen Beispiel können wir nur das letzte Element ändern.

Dieses Mal verwenden wir :last-of-type auf folgende Weise:

#top-menu li:last-of-type {
    margin-right: 140px;
}

Und das Ergebnis wäre:

:nth-of-type Modifiziert das oder die gewünschten Elemente

Diese Pseudoklasse ist sehr leistungsfähig, da wir auf jedes gewünschte Element verweisen oder Muster für mehrere auszuwählende Elemente erstellen können.

Stellen wir uns vor, dass ich das zweite Element meines Menüs ändern muss, dafür würden wir nth-of-type wie folgt verwenden:

#top-menu li:nth-of-type(2) {
    margin-right: 140px;
}

Erstellen Sie Muster mit :nth-of-type auf geraden Elementen

Wenn wir, anstatt auf ein bestimmtes Element zu verweisen, alle n Elemente auf ein Element verweisen möchten, würden wir es so machen:

#top-menu li:nth-of-type(2n) {
    margin-right: 140px;
}

Und das Ergebnis wäre, den Rand auf das zweite und vierte Element anzuwenden:

Erstellen Sie Muster mit :nth-of-type auf ungeraden Elementen

In gleicher Weise können wir uns auf die ungeraden Elemente wie folgt beziehen:

#top-menu li:nth-of-type(2n+1) {
    margin-right: 140px;
}

Und das Ergebnis wäre:

CSS-Änderungen zu WordPress hinzufügen

Wir haben CSS-Änderungen am Elementinspektor vorgenommen. Und das ist großartig, um es zu testen, aber sobald wir die Seite aktualisieren, verschwinden die Änderungen, da diese Änderungen nicht im Web gespeichert werden, sondern in unserem eigenen Browser.

Um die Änderungen zu WordPress hinzuzufügen, gibt es viele Möglichkeiten, von der Änderung der CSS-Datei unserer Vorlage bis zur Verwendung der WordPress-Oberfläche selbst.

Wir werden die WordPress-Oberfläche selbst verwenden, dazu gehen wir zum Menü Anpassen -> Zusätzliches CSS hinzufügen:

Wir klicken und wir kommen zu dem Bildschirm, wo wir das CSS hinzufügen müssen:

Bonustrack: Fügen Sie einem untergeordneten Element eine Pseudo-Klasse hinzu

Wie wir gesehen haben, ermöglichen uns diese Pseudo-Klassen, Geschwisterelemente, dh Elemente auf derselben Ebene, einfach zu ändern.

Aber stellen wir uns vor, wir wollen die Farbe der ungeraden Elemente unseres Menüs ändern.

Die Farbe wird nicht im Listenelement (li) definiert, sondern im Linkelement (a), das sich innerhalb des Listenelements befindet:

Wenn wir uns den Elementinspektor ansehen:

Wenn wir genau hinsehen, sehen wir, dass wir das Muster nicht auf folgende Weise erstellen konnten:

#top-menu li a:nth-of-type(2n+1) {
    color: red;
}

Da sich jeder Link in einem anderen Li befindet, wären sie alle das erste Element und würden alle ihre Farbe ändern:

Wir müssten das Muster mit der Pseudo-Klasse folgendermaßen auf das li-Element anwenden:

#top-menu li:nth-of-type(2n+1) a {
    color: red;
}

Was zu dem führte, was wir wirklich wollten:

Wie wir gesehen haben, ist es nicht das Ende der Welt, wenn wir keinen Bezeichner oder keine Klasse haben.

Dank Pseudoklassen können wir auf fast jedes Element unseres HTML zugreifen.

Ich hoffe es hat euch gefallen 😉