jQuery Academy · Lektion

Pseudo-Klassen und benutzerdefinierte Selektoren

Pseudo-Klassen und benutzerdefinierte Selektoren ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Die Möglichkeiten mit Pseudoklassen erweitern

Willkommen bei den erweiterten Selektoren! Heute sehen wir uns Pseudoklassen an – spezielle Schlüsselwörter, die Selektoren hinzugefügt werden, um einen besonderen Zustand des ausgewählten Elements zu beschreiben.

Mit ihnen können Sie Elemente ansprechen, die sich nicht einfach anhand standardmäßiger HTML-Attribute oder -Namen auswählen lassen.
Betrachten Sie sie als dynamische Filter für Ihre Auswahlen.

Sie beginnen mit einem Doppelpunkt (:), beispielsweise :hover oder :first-child.

Nach Position auswählen: :nth-child()

Die Pseudoklasse :nth-child() wählt Elemente anhand ihrer Position innerhalb einer Gruppe von Geschwisterelementen aus. Sie ist besonders nützlich, um Listen oder Tabellenzeilen zu formatieren.

:nth-child(n): Wählt das n-te Kind aus.
:nth-child(odd): Wählt Kinder mit ungerader Nummer aus.
:nth-child(even): Wählt Kinder mit gerader Nummer aus.

Die Zählung beginnt beim ersten Kind mit 1.

Formatieren mit :nth-child(odd/even)

Sehen wir uns an, wie Sie mit :nth-child(odd) und :nth-child(even) schnell abwechselnde Formatierungen anwenden können, etwa Zebra-Streifen in einer Liste.

Führen Sie dieses Beispiel aus, um den Effekt zu sehen:

$(document).ready(function() {
  // Selects odd list items and makes their text blue
  $('li:nth-child(odd)').css('color', 'blue');
  // Selects even list items and makes their text green
  $('li:nth-child(even)').css('color', 'green');
});

// HTML Structure (imagine this is in your page):
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
//   <li>Item 4</li>
// </ul>

Erweiterte :nth-child()-Formeln

Sie können komplexere Formeln wie An+B innerhalb von :nth-child() verwenden. Dabei steht A für die Zykluslänge und B für den Versatz.

:nth-child(3n): Wählt jedes dritte Kind aus (3., 6., 9. ...).
:nth-child(3n+1): Wählt das 1., 4., 7. ... Kind aus.

Dadurch sind sehr präzise Auswahlen in bestimmten Intervallen möglich.

Elemente mit :not() ausschließen

Mit der Pseudoklasse :not() können Sie bestimmte Elemente aus einer Auswahl ausschließen. Es ist, als würden Sie sagen: „Wählen Sie alle Absätze aus, außer denen mit der Klasse 'intro'.“

Sie nimmt einen weiteren Selektor als Argument entgegen: :not(selector).
Damit können Sie bestehende Auswahlen gezielt verfeinern, ohne komplexe neue Selektoren schreiben zu müssen.

:not() in der Praxis

Stellen Sie sich vor, Sie möchten allen Listenelementen außer dem allerersten einen Rahmen hinzufügen. :not(:first-child) ist dafür ideal.

Sehen Sie, wie :not() uns dabei hilft, das erste Element auszuschließen:

$(document).ready(function() {
  // Selects all list items that are NOT the first child
  $('li:not(:first-child)').css('border-top', '1px solid gray');
});

// HTML Structure:
// <ul>
//   <li>First Item</li>
//   <li>Second Item</li>
//   <li>Third Item</li>
// </ul>

Elternelemente mit :has() auswählen

Die Pseudoklasse :has() ist einzigartig: Sie wählt ein Element aus, wenn es mindestens ein Element enthält, das dem als Argument übergebenen Selektor entspricht.

Es ist, als würden Sie sagen: „Geben Sie mir alle <div>-Elemente, die ein <p>-Tag in sich haben.“
So können Sie Elternelemente anhand der Eigenschaften ihrer Kindelemente auswählen.

Hervorheben mit :has()

Angenommen, Sie möchten nur die <div>-Container hervorheben, die ein Bild enthalten. Mit :has('img') ist das effizient möglich.

Führen Sie diesen Code aus, um zu sehen, welches div einen Rahmen erhält:

$(document).ready(function() {
  // Selects divs that contain an image and adds a border
  $('div:has(img)').css('border', '2px solid red');
});

// HTML Structure:
// <div id="container1">
//   <p>Text only</p>
// </div>
// <div id="container2">
//   <img src="example.png" alt="An image">
//   <p>Text and image</p>
// </div>

Benutzerdefinierte Selektoren: jQuery erweitern

Was ist, wenn die integrierten Selektoren von jQuery nicht ausreichen? Sie können Ihre eigenen benutzerdefinierten Pseudoselektoren erstellen! Damit können Sie Elemente anhand einer sehr spezifischen, eigenen Logik filtern.

Sie registrieren sie mit jQuery.expr[':'].
Dadurch wird Ihr Auswahlcode übersichtlicher und wiederverwendbar.

Dies ist eine fortgeschrittene Funktion für wirklich spezielle Filteranforderungen.

Einen benutzerdefinierten :contains-word() erstellen

Erstellen wir einen benutzerdefinierten Selektor namens :contains-word(), der Elemente findet, die ein bestimmtes vollständiges Wort enthalten, nicht nur einen Teilstring.

In diesem Beispiel wird :contains-word() definiert und anschließend verwendet:

$(document).ready(function() {
  // Define a custom pseudo-selector ':contains-word'
  $.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
    var pattern = new RegExp('\b' + word + '\b', 'i');
    return function(elem) {
      return pattern.test($(elem).text());
    };
  });

  // Use the custom selector to find paragraphs containing 'hello'
  $('p:contains-word("hello")').css('background-color', 'yellow');
});

// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>

Herausforderung zu Pseudoklassen

Betrachten Sie das folgende HTML:

<ul>
  <li class="special">One</li>
  <li>Two</li>
  <li class="special">Three</li>
  <li>Four</li>
  <li class="special">Five</li>
</ul>

Welcher jQuery-Selektor würde ausschließlich 'Two' und 'Four' auswählen?

Zusammenfassung: Pseudoklassen und benutzerdefinierte Selektoren

Sie beherrschen nun leistungsstarke Techniken zur Auswahl mit jQuery!

Pseudoklassen (wie :nth-child(), :not(), :has()) ermöglichen es Ihnen, Elemente anhand ihres Zustands oder ihrer Beziehung zu anderen Elementen auszuwählen.
:nth-child() wählt Elemente anhand ihrer Position aus, auch mithilfe von Formeln.
:not() schließt Elemente aus einer Auswahl aus.
:has() wählt Elternelemente anhand ihrer Kindelemente aus.
Sie können mit jQuery.expr[':'] sogar eigene benutzerdefinierte Pseudoselektoren für sehr spezifische Filterungen erstellen.

Üben Sie weiter, um Ihre Auswahl im DOM zu verfeinern!

Häufig gestellte Fragen

Ist die Lektion „Pseudo-Klassen und benutzerdefinierte Selektoren“ kostenlos?

Ja — der vollständige Text von „Pseudo-Klassen und benutzerdefinierte Selektoren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Pseudo-Klassen und benutzerdefinierte Selektoren“?

Verstehen Sie integrierte Pseudo-Klassen wie :has(), :not() und :nth-child() und lernen Sie anschließend, eigene benutzerdefinierte Selektoren zur wiederverwendbaren Filterung von Elementen zu erstel… Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Pseudo-Klassen und benutzerdefinierte Selektoren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Erweiterte Attributselektoren
Pseudo-Klassen und benutzerdefinierte Selektoren
Effiziente Techniken zur DOM-Navigation

← Zurück zu jQuery Academy