Tutorials zur Webentwicklung

CSS - Selektoren

Selektoren dienen der Zuweisung von CSS Eigen­schaften auf bestimmte HTML Elemente und werden durch den Namen des HTML Elements repräsentiert und inner­halb von <style> Blöcken oder externen CSS Dateien ge­nutzt.

Zur Erinnerung: Die folgenden Listings zeigen die bereits vor­gestellten Varianten (HTML <style> Tag vs. externer CSS Datei) zum Notieren von CSS Code:

<style>

  body {
    background-color: #ffffff;
  }

</style>

body {
  background-color: #ede8fe;

}

Einfache Selektoren

In beiden Fällen wird ein sog. einfacher Selektor genutzt um die Hinter­grund­farbe des body Tags zu ändern. Einfache Selektoren bestehen nur aus einem Elementen­namen, diese können aneinander­gereiht werden.

Die Werte der obigen Eigen­schaften weichen von­einander ab. An dieser Stelle muss geklärt werden, wie der Browser reagieren wird, wenn beide Varianten notiert werden. Welche der beiden Regeln wird um­gesetzt?

Allgemeine Regeln

Um Konflikte dieser Art ein­deutig auf­lösen zu können, gelten die folgenden Regeln:

1. Wenn mehrere externe CSS Dateien ein­gebunden werden und gleiche Regeln (mit unterschiedlichen Werten) besitzen, gewinnt die Regel in der zuletzt ein­gebundenen Datei. Also die Regel in der Datei die im Code weiter unten steht!

2. Wenn sich mehrere gleiche CSS Regeln (mit unter­schiedlichen Werten) in einer externen Datei befinden, gewinnt die Regel die weiter unten steht!

3. Wenn sich mehrere gleiche CSS Regeln (mit unter­schiedlichen Werten) im Kopf einer HTML Datei befinden, gewinnt die Regel die weiter unten steht! Ausser­dem gewinnen diese Regeln gegen­über Regeln in externen CSS Dateien!

4. CSS Regeln die sich direkt (per <style> Attribut) am Element befinden, gewinnen gegen­über anderen Regeln!

Merksatz:
Desto näher sich eine CSS Eigen­schaft am HTML Element befindet, desto höher ist dessen Priorität!

Demnach wird die Eigen­schaft aus dem <style> Block um­gesetzt, da diese laut Regel 3. gewinnt. Desweiteren greift der Merk­satz!

Da es sich im obigen Beispiel in beiden Fällen um einfache Selektoren handelt, und beide Selektoren dadurch die selbe Priorität besitzen, zeigen sich die allgemeinen Regeln als aus­reichend um den Konflikt zu lösen.

Kombinierte Selektoren

CSS bietet uns die Selektoren zu spezifizieren, dazu können sog. kombinierte Selektoren ge­nutzt werden. Die Eigen­schaften der kombinierten Selektoren besitzen eine höhrere Priorität gegen­über den einfachen Selektoren.

Sehen Sie sich die folgenden Kombinations­möglich­keiten an. Analysieren Sie anschließend die Unter­schiede und damit ver­bundenen Aus­wirkungen, wenn die folgenden Eigen­schaften dem obigen Beispiel inner­halb einer externen CSS Datei hinzu­gefügt werden!

Nachfahrenkombinator:

Mehrere einfache Selektoren können mit­einander kombiniert werden. In diesem Fall spielt es bei der Ver­erbung keine Rolle, ob das zweite Element ein direktes Kind­element ist.

body section {
   background-color: ###;
}

Kindkombinator:

Bei dieser Kombination muss das zweite Element ein Kind­element vom ersten Selektor sein um die Eigen­schaften zu erben!

body > section {
   background-color: ###;
}

Mehr dazu ...

Das Punktesystem

Zum Lösen von Konflikten dieser Art, existiert eine Art Punkte­system, die sog. Spezifität. Anhand der erreichten Punkt­zahl wird die Priorität fest­gelegt. Die Eigen­schaft mit der höchsten Spezifität wird um­gesetzt.

Im obigen Beispiel besitzen beide Regeln ab­weichende Werte, außer­dem existiert noch die Regel im <style<> Block und die Regel des ein­fachen Selektors. Welche CSS Eigen­schaft erhält das <body<> Element? Um diese Konflikte zu lösen existieren die folgenden Regeln.

1. Die kombinierten Selektoren gewinnen gegen­über den einfachen Selektroen, da diese eine höhrere Spezifität besitzen.

Die CSS Eigen­schaft body {background-color: #ede8fe;} inner­halb der externen CSS Datei wird von der folgenden Eigen­schaft des body section { } Selektors über­schrieben.

2. Die kombinierten Selektoren (Nach­fahren­kombinator & Kind­kombinator) besitzen die gleiche Spezifität. Laut den allgemeinen Regeln gewinnt die­jenige Eigen­schaft, die weiter unten im CSS Code steht.

3. Da die CSS Eigen­schaft weiter­hin im <style<> Block des HTML Dokuments existiert, gewinnt diese Regel erneut und über­schreibt auch den Wert der letzten Regel aus der externen CSS Datei!

Das Punkte­system der Selektoren:

Mehr dazu ...

Klassen

Mit der Hilfe einer Klasse lassen sich ganze Blöcke von Eigen­schaften auf diverse HTML Elemente über­tragen. Eine Klasse wird mittels einem . (Punkt) ein­geleitet, gefolgt von deren Namen.

/* Klasse */

.box {
   background-color: gray;
   color: orange;
}

Alle Elemente mit dem Attribut class="box" erhalten die obigen Eigenschaften.

IDs

Ganz ähnlich verhält es sich beim ID Selektor. Der ID Selektor wird mit einem # (Rautezeichen) eingeleitet.

/* ID */

#box {
   background-color: gray;
   color: orange;
}

Alle Elemente mit dem Attribut id="box" erhalten die obigen Eigenschaften. Zu beachten ist, das eine ID im HTML Dokument nur ein mal auftreten darf!

In der Praxis

Erweitern Sie die Datei main.css. Nutzen Sie kombinierte Selektoren um auf bestimmte HTML Bereiche spezielle CSS Eigen­scahften zu über­tragen.

Zeit für ein paar Ver­änderungen inner­halb der CSS Datei. Sehen Sie sich die markierten Bereiche an und analysieren Sie anschließend die neuen Regeln.

/* -------- */
/* Bereiche */
/* ---------*/

body {
  font-family: 'Armata', 'Verdana', 'Arial', 'Helvetica', sans-serif;
  font-size: 1rem;

  line-height: 1.2;
}

header, aside, main, footer {
  display: block;

  box-sizing: border-box;
  overflow: hidden;

  height: auto;
  width: 100%;

  margin: 0;
    /* border: 1px dashed pink; */
  padding: 0.4rem 0.6rem;
}

header, footer {
  background-color: black;
}

aside {
  background-color: pink;
}

main {
  background-color: grey;
}

header p,
footer p {
  font-weight: bold;
  color: #ffffff;

  padding: 2rem 1rem;

  text-align: center;
}

/* -------- */
/* ## ## ## */
/* ---------*/
section {
  display: block;
  background-color: #ffffff;

  box-sizing: border-box;
  overflow: hidden;

  height: auto;
  width: 84%;

  margin: 1.2rem auto;
    border: 1px dashed green;
  padding: 0.6rem;
}


/* -------- */
/* Elemente */
/* ---------*/

/* Überschrift */
h1 {
  font-size: 1.6rem;
  color: #B40000;
}

/* Text */
p {
  color: grey;
}

1. Die aneinander­gereihten Selektoren werden vor den ein­fachen Selektoren notiert. Ver­änderungen an den einfachen Selektoren über­schreiben auf diese Weise die "allgemeinen" Eigen­schaften dieser Gruppierung.

2. Die Selektoren werden sinn­voll sortiert und evtl. gruppiert.

3. Kombinierte Selektoren kommen zum Ein­satz um bestimmte Bereiche zu stylen. Beachten Sie die Ver­änderungen im Kopf- und Fuß­bereich.

Bearbeiten Sie das Thema 3. CSS - Seitenlayout!