CSS/Einstieg in Selektoren

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Dieses Tutorial führt Sie in die Welt der Selektoren ein, mit denen Sie Webseiten und denen Elemente zielgenau auswählen und formatieren können.

Eine grundlegende Einführung in CSS erhalten Sie im Tutorial Einstieg in CSS.

Selektoren[Bearbeiten]

Typselektor[Bearbeiten]

Mit dem Element- bzw. Typselektor werden alle Elemente eines Typs angesprochen.

Beispiel: Typselektor ansehen …
h1 { 
  color: red; 
}
h1, h2 { 
  background-color: #ccc;
  border-radius: .5em; 
}
Der erste Regelsatz besteht aus einem Selektor h1, der allen h1-Elementen die Textfarbe rot zuweist.
Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, die alle Überschriften vom Typ h1 und h2 anspricht.

ids und Klassen[Bearbeiten]

Oft will man innerhalb eines Tests nur einen Absatz anders formatieren. Dafür gibt es zwei Möglichkeiten:

Sie können jedem HTML-Element mit dem Universalattribut id einen eindeutigen, unverwechselbaren Bezeichner geben, den Sie dann als id-Selektor verwenden können.

Beispiel: id-Selektor ansehen …
<style>
#warnung {
  color: red;
  border-left: 5px solid;
  padding-left: 5px;
}
</style>
...
<div id="warnung">
  <h2>Beachten</h2>
  <p>Sie können eine id innerhalb eines HTML-Dokuments nur einmal verwenden!</p>
</div>
Das id-Attribut wird im CSS mit einer Raute (hash) und dem Namen als Selektor verwendet. Das so angesprochene Element erhält nun einen roten Rand links und eine rote Textfarbe. Damit der Rand nicht an den Text stößt, erhält das div noch einen linken Innenabstand von 5px.
Beachten Sie: Sie können eine id innerhalb eines HTML-Dokuments nur einmal verwenden!

Falls Sie mehrere Elemente stylen wollen, empfiehlt sich das Universalattribut class. Damit können Sie auch unterschiedliche Elemente formatieren:

Beispiel: class-Selektor ansehen …
<style>
  .warnung {
    color: red;
  }
  p.warnung {
    border: 1px solid red;
    background-color: peachpuff;
  }
</style>
<body>
  <h1 class="warnung">
    Dies sind einige Möglichkeiten, die Klasse <code>warnung</code> auf verschiedene HTML-Elemente anzuwenden.
  </h1>

  <p class="warnung">Bitte die AGB lesen!</p>

  <p><strong class="warnung">Achtung:</strong> Bitte die AGB lesen!</p>
</body>
Das Beispiel selektiert alle Elemente mit der Klasse warnung. Der Klassenselektor wird gebildet, wenn vor dem Klassennamen ein Punkt notiert wird.

Der Regelsatz gibt den angesprochenen Elementen die Textfarbe rot.

Sie können den Klassenselektor aber auch mit einem Typselektor kombinieren. So spricht p.warnung alle Absätze dieser Klasse an, die zusätzlich einen rotem Rand und einen hautfarbenen Hintergrund erhalten.
Empfehlung: Verwenden Sie sprechende Klassennamen, die die Funktion und nicht die Art und Weise der Gestaltung beschreiben.

Was passiert, wenn ein Element sowohl einen id- als auch einen Klassenselektor hat und dann wiedersprüchliche CSS-Festlegungen? Dann wird der Selektor mit der höheren Spezifität verwendet und der andere ignoriert.

Pseudoklassen[Bearbeiten]

Häufig soll aber ein Element der Webseite nicht aufgrund seiner semantischen Bedeutung, sondern aufgrund der Position innerhalb der Webseite besonders formatiert werden. Der umständliche Weg wäre, dem betreffenden Element eine Klasse zu geben und, wenn sich die Position verändert, das HTML-Markup entsprechend anzupassen.

Mit der strukturellen Pseudoklasse :first-child können Sie das erste Element ansprechen.

Beispiel: Siegerliste mit :first-child ansehen …
li {
  width: 10em;
  text-align: center;	
}	
	
li:first-child {
  background-color: gold;
  border: 1px solid;
  border-radius: 5px;
}
Das Beispiel selektiert das erste li-Element und gibt ihm eine goldene Hintergrundfarbe und einen abgerundeten Rahmen.
Falls sich das Markup ändert, bleibt die Formatierung der Siegerliste gleich.v

Leider gibt es keinen second-child-Selektor. Sie können aber mit :nth-child()-Selektor beliebige Elemente ansprechen.

Beispiel: Siegerliste mit :nth-child() ansehen …
li:nth-child(2) {
  background-color: lightgrey; /* silver */
  border: 1px solid;
  border-radius: 5px;
} 
li:nth-child(3) {
  background-color: #cd7f32;   /* bronze */
  border: 1px solid;
  border-radius: 5px;
}
Das Beispiel selektiert mit nth-child() das zweite und dritte li-Element und gibt ihm eine silberne, bzw. bronzene Hintergrundfarbe und einen abgerundeten Rahmen.

Der :nth-child()-Selektor kann mit den Werten even und odd (engl. für gerade und ungerade) auch jedes zweite Element ansprechen und so eine Tabelle mit einem Zebra-Look anschaulicher gestalten:

Beispiel ansehen …
table {width: 95%;} th { background-color: #666; color: #fff; } tr { background-color: #fffbf0; color: #000; } tr:nth-child(odd) { background-color: #e4ebf2 ; }
In diesem Beispiel wird eine Tabelle dargestellt.

Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann wird jede zweite Zeile mit

tr:nth-child(odd) {
       background-color: #e4ebf2 ;
}
anders eingefärbt.

dynamische Pseudoklassen[Bearbeiten]

  •  :hover
  •  :focus

ToDo (weitere ToDos)

wird fortgesetzt ---Matthias Scharwies (Diskussion) 05:08, 19. Okt. 2017 (CEST)

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]