Lernkarten

Karten 19 Karten
Lernende 0 Lernende
Sprache Deutsch
Stufe Andere
Erstellt / Aktualisiert 05.02.2021 / 14.02.2021
Lizenzierung Keine Angabe     (zbw)
Weblink
Einbinden
0 Exakte Antworten 19 Text Antworten 0 Multiple Choice Antworten
Fenster schliessen

Was ist ein Selektor?

  • steht im CSS vor den gewungenen Klammern
  • Wenn mehrere Selektoren die gleichen Eigenschaften erhalten sollen, notiert man die Selektoren nacheinander und trennt sie mit Komma.
  • es wird also zwischen Groß- und Kleinschreibung unterschieden.
  • immer anhand ihrer Funktion und nicht anhand ihres Aussehens benennen.

Arten:

  • Einfache Selektoren
  • Kombinatoren: zwei Selektoren werden mit Operator oder Leerraum verkettet
Fenster schliessen

Erläutere den Typselektor

  • element {...}
  • HTML-Element mit dem Namen element
  • <element>
Fenster schliessen

Erläutere den Klassenselektor

  • .klname
  • Element mit der Klasse klname
  • <p class="klname">
  • der Name sollte Sinn ergeben
Fenster schliessen

Erläutere den ID-Selektor

  • #elemid
  • Element mit der ID elemid
  • <p id="elemid">
  • der Name sollte Sinn ergeben
  • kombinierte Selektoren bspw. Klasse und ID machen wenig sinn, da ID eindeutig
Fenster schliessen

Universalselektor

  • *
  • jedes Element
  • <p>
  • kann verwendet werden um alle Elemente auszuwählen * { }
  • oder alle Elemente in einem Element. main * { }
Fenster schliessen

Wie spricht verwendet man im CSS den Attributselektor (generell und Teilwerte)?

wenn man generell im CSS ein Attribut ansprechen möchte: 

  • jedes Element, bei dem das Attribut vorhanden ist: [attributname] {...}

Nachfolgende Beispiele anhand des Attributs title:

[title=wert]   { }

  • Alle Attribute, bei denen das Attribut (der title) 100% diesem Wert entspricht

[title~=wert] { }

  • Alle Attribute, bei denen der das alleinstehende Wort "wert" enthalten ist
  • bspw. <div title="abc wert xyz"

[title^=wert]  { }

  • jedes Element, bei dem das Attribut attr mit der Textfolge wert anfängt
  • <elem title="werter">

[title$=wert] { }

  • jedes Element, bei dem das Attribut attr mit der Textfolge wert endet
  • <elem title="endwert">

[title*=wert] { }

  • jedes Element, bei dem das Attribut attr die Textfolge wert enthält
  • <elem title="bewertung">

[title | = wert] { }

  • Jedes Element, bie dem im Attribut der Wert am Anfang mit einem Bindestrich steht
  • bspw. <div title="wert-xyz">

 

Fenster schliessen

Zähle dir bekannte einfache CSS Selektoren auf

  • Typselektor
  • Klassenselektor
  • ID-Selektor
  • Universalselektor
  • Attributselektor (3 Stück, Wert am Anfang, Ende, Mitte)
Fenster schliessen

Was ist eine Pseudoklasse?

  • Hierbei handelt es sich um Elemente, die nicht über gewöhnliche Selektoren erreicht werden können.
  • Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise :hover für Elemente, die gerade mit dem Mauszeiger berührt werden.