Testen Sie Ihre Fähigkeiten: Selektoren

In dieser Aufgabe sollen Sie mit CSS Folgendes erreichen, ohne das HTML zu ändern:

• Machen Sie <h1> Überschriften blau.
• Geben Sie <h2> Überschriften einen blauen Hintergrund und weißen Text.
• Sorgen Sie dafür, dass Text, der in einem <span> enthalten ist, eine Schriftgröße von 200% hat.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe möchten wir, dass Sie folgende Änderungen am Aussehen des Inhalts in diesem Beispiel vornehmen, ohne das HTML zu ändern:

• Geben Sie dem Element mit der ID special einen gelben Hintergrund.
• Geben Sie dem Element mit der Klasse alert einen 1px grauen Rand.
• Wenn das Element mit der Klasse alert auch die Klasse stop hat, machen Sie den Hintergrund rot.
• Wenn das Element mit der Klasse alert auch die Klasse go hat, machen Sie den Hintergrund grün.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe möchten wir, dass Sie folgende Änderungen ohne Hinzufügen zum HTML vornehmen:

• Gestalten Sie Links, indem Sie die Linkfarbe orange, besuchte Links grün machen und das Unterstreichen beim Hover entfernen.
• Machen Sie das erste Element innerhalb des Containers in Schriftgröße: 150% und die erste Zeile dieses Elements rot.
• Färben Sie jede zweite Zeile in der Tabelle abwechselnd, indem Sie diese Zeilen auswählen und ihnen eine Hintergrundfarbe von #333 und eine Vordergrundfarbe von weiß geben.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe möchten wir, dass Sie Folgendes tun:

• Machen Sie jeden Absatz, der direkt auf ein <h2> Element folgt, rot.
• Entfernen Sie die Aufzählungszeichen und fügen Sie nur den Listenelementen, die ein direktes Kind des ul mit der Klasse list sind, einen 1px grauen unteren Rand hinzu.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe fügen Sie CSS mit Attributselektoren hinzu, um Folgendes zu tun:

• Ziel ist das <a> Element mit einem title Attribut und die Umrandung soll pink sein (border-color: pink).
• Ziel ist das <a> Element mit einem href Attribut, das irgendwo in seinem Wert das Wort contact enthält, und die Umrandung soll orange sein (border-color: orange).
• Ziel ist das <a> Element mit einem href Wert, der mit https beginnt, und geben Sie ihm eine grüne Umrandung (border-color: green).

Ihr Endergebnis sollte wie das folgende Bild aussehen:

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden: