MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

In diesem ersten Beitrag über Selektoren lernen wir "einfache" Selektoren kennen, die deswegen so heißen, weil sie einfach und direkt einem oder mehreren Elementen eines Dokuments zugeordnet sind.
Die typisierten Selektoren entsprechen dabei jeweils einem HTML-Element, während die Klassen- und ID-Selektoren untypisiert sind und sich nicht auf ein Element beschränken müssen.

1. Typen- oder Elemente-Selektoren

Mit dem Attribut class (also einer Klasse) ist es möglich, HTML-Elementen benutzerdefinierte Zusammenstellungen von Darstellungs- oder Formatierungsregeln zu geben. Der Typ-Selektor ist der einfachste seiner Art, da dieser Selektortyp vom Namen her, egal ob groß oder klein geschrieben, direkt dem eines HTML Elementes entspricht - die einfachste Möglichkeit, um alle HTML Elemente des betreffenden Typs anzusprechen. Schauen wir uns ein Beispiel dazu mal an:

Hier etwas HTML (die Information):

<p>Welche Farbe mögen Sie?</p>
<div>Ich mag blau.</div>
<p>Ich bevorzuge rot!</p>

und hier die Formatierung (ein einfaches Style sheet):

/* Alle p Elemente werden rot dargestellt */
p {
  color: red;
}

/* Alle div Elemente sind dagegen blau */
div {
  color: blue;
}

So erhalten wir dies:

Mitgemacht: Verschiedene Elemente auszeichnen

Zur Übung möchten wir Sie bitten, den Selektor der im folgenden Beispiel einzigen CSS Regel bzw. Vorschrift so zu ändern, dass ein anderes Element im Beispiel die dazugehörende Formatierung erhält, das bis dato unformatiert ist. Wissen Sie vielleicht auch schon, wie man diese CSS Vorschrift auf mehrere HTML Elemente auf einmal anwenden kann? (Tip: Mehrere alternative Selektoren werden mit Kommas getrennt angegeben).

Falls Sie einen Fehler machen, reicht es, auf die Schaltfläche Reset zu klicken. Wenn Sie gar nicht klarkommen, dann führt ein Klick auf Show solution zur Anzeige einer möglichen Lösung - die beileibe nicht die einzige sein muß:

2. Die Klassen-Selektoren

Der Name eines Klassen-Selektor wird von einem Punkt , '.', angeführt. Ein Klassenname ist eine Zeichenfolge ohne Leerstellen, die einen Wert für das HTML class -Attribut darstellt (ein Leerzeichen würde hier nämlich bedeuten, dass damit zwei Klassen bezeichnet werden). Dabei können Sie den Namen - auch ganz lang - ganz nach Ihrem Belieben wählen, nur halt ohne Leerzeichen!

Zweierlei ist dabei wichtig zu wissen: dass auch mehrere - verschiedene - HTML Elemente in einem Dokument (einer Datei) den gleichen Klassennamen haben dürfen,

- und dass ein einzelnes HTML Element verschiedenen Klassen angehören kann - also mehrere (durch Leerstellen (white spaces) voneinander getrennte) Klassennamen als Attribute haben kann. So wird etwa aus class="a" class="b" class="c" ein einfaches class="a b c". Ein kurzes Beispiel für den Einsatz von Klassen-Selektoren folgt jetzt:

Hier etwas HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

Und hier die Formatvorlage (simple style sheet):

/* Das Element wird der Klasse "first" ist fett dargestellt */
.first {
  font-weight: bold;
}

/* Alle Elemente der Klasse "done" sind als erledigt durchgestrichen */
.done {
  text-decoration: line-through;
}

Daraus erhalten wir diese Ansicht:

Mitgemacht: Handhabung mehrerer Klassen

Bei dieser Übung möchten wir Sie bitten, die Klassenattribute der Absatzelemente (p) so zu ändern, dass ihnen mehrere unterschiedliche Formatierungseffekte zukommen. Es reicht, wenn Sie versuchen, auf einen Absatz (Zeile) die Klasse base-box zusammen mit einer Hinweisklasse (editor-note oder warning) anzuwenden, oder ihm auch den Hinweis important zu vermitteln, um seine Bedeutung vor den anderen Absätzen besonders hervorzuheben. Machen Sie sich klar, wie einfach diese Art der Regelsetzung den Aufbau eines modularen Stilregelsystems (modular system of styles) erlaubt!

Falls Sie einen Fehler machen, reicht es, auf die Schaltfläche Reset zu klicken. Wenn Sie gar nicht klarkommen, dann führt ein Klick auf Show solution zur Anzeige einer möglichen Lösung - die beileibe nicht die einzige sein muß:

3. ID-Selektoren

Die dritte grundlegende Selektorenart sind ID-Selektoren. Sie werden vom Wertezeichen # (hash/pound symbol) angeführt, worauf die Bezeichnung (die ID) eines bestimmten Elementes folgt. Jedes Element darf eine einzigartige Individualbezeichnung mit Hilfe des id -Attributs erhalten. Welche Bezeichnung Sie wählen obliegt dabei Ihnen. Jedenfalls ist das die einfachste Möglichkeit, ein bestimmtes HTML-Element damit zu kennzeichnen und sich mit Javascript darauf zu beziehen, falls das erforderlich ist.

WICHTIG: Jede ID darf im Dokument (Datei) nur einmalig vergeben werden. Werden nämlich mehrere angegeben, dann ist das Verhalten der Browser nicht vorhersagbar, etwa, dass nur das erste Vorkommen einer ID wahrgenommen wird und die Klone ignoriert werden.

Und wieder ein einfaches Beispiel, hier der HTML-Teil:

<p id="polite"> — "Guten Morgen - als Zeichen der Höflichkeit."</p>
<p id="rude"> — "Verschwinde hier! - als Zeichen der Grobheit."</p>

Ein einfaches Style Sheet (Formatvorlage):

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

Daraus erhalten wir diese Anzeige:

Mitgemacht: Siegerfarbe mit IDs zuordnen

Bei dieser Übung geht es uns darum, daß Sie den aufgeführten Siegerplätzen, dem Sieger, dem zweiten und dritten Platz irgendeines Wettbewerbes die entsprechende Farbe (Gold, Silber, Bronze) zuordnen, indem Sie den letzten drei, noch nicht benannten CSS Regeln (oder -Vorgaben) die Selektoren zuweisen, die zu den ihrer ID entsprechenden Elementen gehören sollen.

Falls Sie einen Fehler machen, reicht es, auf die Schaltfläche Reset zu klicken. Wenn Sie gar nicht klarkommen, dann führt ein Klick auf Show solution zur Anzeige einer möglichen Lösung - die beileibe nicht die einzige sein muß:

4. Der Universal-Selektor

Der vierte Selektor (*) ist schon was Besonderes, ein joker, da er ALLE Elemente einer Seite auswählt. Daher wird der Universal-Selektor ziemlich selten verwendet - wenn man jedem x-beliebigen Element das gleiche Formatierungsmerkmal zuweisen will? Öfter käme da eher wohl die Verwendung im Zusammenhang mit anderen Selektoren in Betracht (siehe unten Combinators.)

VORSICHT bei der Verwendung des Universal-Selektors. Da dies wirklich alle Elemente betrifft kann es bei umfangreichen Webseiten spürbare Leistungseinbußen zur Folge haben, was etwa die Ladezeit solcher Seiten betrifft. Wirklich viele Einsatzmöglichkeiten gibt es für den Universal-Selektor wohl nicht.

Als Beispiel hier etwas HTML:

<div>
  <p>Ich denke, dass die diesen Absatz enthaltende Box einen
  <strong>starken Rand</strong> oder <em>ähnliches</em> haben sollte,
  - aber dies hier <strong>gerät wohl doch aus der Hand</strong>!</p>
</div>

Die einfache Formatierung:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Zusammen ergibt sich dieses Resultat:

Im nächsten Teil...

gut, wenn Sie diesen Teil des Tutoriums schon mal gemacht haben. Wir hoffen, es hat Ihnen Klarheit gebracht, denn nach den grundlegenden Selektoren, die wohl auch am meisten verwendet werden, schauen wir uns mal die weitergehenden Möglichkeiten an, Formatelemente für HTML Elemente näher zu bestimmen. Dort beginnen wir mit den Attribut-Selektoren.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Kammreiter
 Zuletzt aktualisiert von: Kammreiter,