Wo wohnen die Kästchen?
Zu Anschauungszwecken mache ich die Kästchen einer Demoseite zuerst mal sichtbar.
Hmm..., mit dieser Demoseite ist es zu unübersichtlich die Adressierung aufzuzeigen. Das Bild sollte etwas einfacher sein!
Jetzt mit kleineren Kästchen:
Die Kästchen sind alle inneinander verschachtelt.
- Das äussere Kästchen ist hier der
header.
Im header beinden sich zwei Kästchen, p und nav.
- Im
nav sind auch 2 Kästchen, nämlich 2 ul.
ul 1: (linkes ul):- Im linken
ul sind 4 li. Die erste 3 li haben jeweils noch ein a.
- Im vierten
li befindet sich nur Text.
ul 2: (rechtes ul):.- In
ul 2 befinden sich 4 li.
Das wäre jetzt unser Beispiel, an dem die Adressierung der Kästchen geübt werden kann:
Nicht schön, aber es ist ein realistisches Beispiel und keine "Fantasieboxen". ;-)
Die Verwandschaftsverhältnisse der Kästchen:
Eine HTML-Datei ist wie ein Stammbaum aufgebaut.
Es gibt ein Elternelement und die Nachkommen, mit wiederum ihren Nachkommen und Verwandten.
Innerhalb eines Stammbaums kann ein Mensch (oder "Kästchen") unterschiedlich bezeichnet werden.
Z.B.:
- Ich bin der Sohn meiner Eltern und gleichzeitig der Vater (Eltern-Element) meiner Kinder.
- Ich habe einen Bruder und drei Schwestern. (Alles Geschwister).
- Meine Kinder haben auch Kinder.
- beinahe hätte ich Opa und Oma vergessen...
Deshalb haben HTML-Elemente unterschiedliche Beschreibungen. Je nach Standpunkt ihrer Beziehungen zueinander.
Mein Bruder "Hans":
- Hans ist mein Geschwister-Element.
- Hans ist das Elternelement von seinen Kindern.
- Hans hat als Elternelement unsere Eltern
- Hans hat als Vorfahrenelement auch noch das Elternelement unserer Eltern (unsere Grosseltern).
- Hans hat als Geschwisterelement auch unsere drei Schwestern und ist das Vorfahren-Element seiner Enkelkinder.
Na,- raucht der Kopf?
Ok, genug "Hütchenspielerei"... :-)
Es gibt verschiedene Methoden zur eindeutigen Adressierung eines HTML-Elements:
Um ein HTML-Element anzusprechen, benötige ich das Wissen, an welcher Stelle es im "Stammbaum" des Dokumentes steht. Das könnte ich jetzt mit einer ellenlangen Beschreibung des Verwandschaftsverhältnisses zu ihm machen.
Methode 1: Über die Beschreibung des eingenommenen Platzes im Stammbaum.
Der Platz (die Zieladresse) kann mit einer "Wegbeschreibung" (Pfad zum Ziel) im "Stammbaum" angegeben werden.
Der Stammbaum: Ausschnitt eines Document Tree
In einem menschlichen Stammbaum kann eine Person auf unterschiedliche Weise beschrieben werden.
Das gleiche gilt auch für ein Element in HTML.
Hier als Beispiel das rote "nav":
- ● ein Kind (Child) des <body>-Elements
- ● ein Eltern-Element (Parent) eines <ul>-Elements
- ● ein Vorfahre (Ancestor) der <li> -Elemente
- ● ein Geschwister (Sibling) des <div>-Elements mit der class= "content" das die selben Eltern <body> hat
Selektoren - die Kästchenauswähler
Beschreibung von Selektoren unter https://wiki.selfhtml.org/wiki/CSS/Selektoren
Element-Selektoren
Kästchenauswahl mit (HTML) Element-Selektoren:
Elementselektoren sind vielleicht am einfachsten zu verstehen. Elementselektoren wählen sämtliche HTML-Elemente aus, die dem Typ entsprechen. Egal wo sich die Elemente auf der Seite befinden.
Ist das betreffende Stylesheet auf jeder Seite vorhanden, dann können die ausgewählte HTML-Elemente auf sämtlichen Seiten mit einer CSS-Anweisung angesprochen werden!
z.B. die Schriftart ändern.
Beispiel: Element-Selektoren
Zuerst die Listenpunkte der "ul" entfernen.
ul {list-style: none;}
Das p-Element bekommt einen blauen Hintergrund mit etwas Opazität (0.34).
p {background-color: rgba(0, 0, 255, 0.34);}
Dem "header" werden die Ecken abgerundet:
header {border-radius: 10px;}
Mit einer CSS-Anweisung erreiche ich sämtliche Listenelemente "li"
li {background-color: yellow;}
Das gleiche gilt für die "Anchors/Anker/Links" a"
a {color: #ff0000;}
Ich benötige aber nur ein bestimmtes Kästchen!?
Element-Selektoren und ihre Kombinationen
Um ein bestimmtes Kästchen "herauszupicken" werden die Element-Selektoren kombiniert. Sie werden als "Wegbeschreibung" im CSS-Stylesheet hintereinander geschrieben.
Nehmen wir mal an, ich möchte im ersten "ul" beim zweiten "a" die Schriftfarbe color, die Schriftart font-family und die Schrift font-weight fett anzeigen, ändern.
Das Problem hier ist, wir haben 2 ul als Kinder von nav.
Element-Selektoren kombinieren am Beispiel nth-of-child:
Das wäre die Lösung für das erste ul:
header nav ul:first-child li:nth-child(2) a {
font-family: sans-serif;
font-weight: bold;
color: red;
}
Das versteht doch kein Mensch, oder?
Der header ist das Elternelement vom Ganzen. Also die Haustüre von Allem. Jetzt machen wir die Tür auf und gehen in den:
header
Im header steht jeweils ein Haus mit dem Namen p und nav. Hier gehen wir in nav rein und sind jetzt in:
header nav
Wir stehen nun vor den beiden Häusern ul. Sie sehen aus wie Zwillinge!
Im HTML-Flow stehen sie allerdings untereinander und sind die Kinder (Child) vom Elternelement nav.
Dann gehen wir doch einfach in's Haus des ersten Kindes (Child):
header nav ul:first-child
(Mein Gott sind in dem ul viele Kinder (li) die auch wiederum Kinder (a) haben). Wo wollten wir nochmal hin? Ach ja, das zweite a.
Das zweite a befindet sich im zweiten li und das hat auch noch 3 Geschwister.Also müssen wir zuerst in das zweite li:
header nav ul:first-child li:nth-child(2)
Ok a ich stehe nun direkt vor dir und schnapp dich mit:
header nav ul:first-child li:nth-child(2) a {
font-family: sans-serif;
font-weight: bold;
color: red;
}
Das wäre die CSS-Anweisung für das zweite ul:
header nav ul:nth-child(2) li:nth-child(4) {
color: red;
}
Das waren aber keine echten Typselektoren in diesem Beispiel ;-)
Im vorherigen Beispiel wurden nicht nur reine Typselektoren benutzt, da im nav 2 x ul vorhanden war.
Reine Typselektoren wären header => nav => ul => li => a gewesen.
Nur,- welches der beiden ul kann man auswählen?
Hier kam dann der Pseudo-Selektor nth-child() zur Hilfe.
Tip: zwischen child und den () darf kein Leerzeichen sein!
Methode 2: Class Selector/Klassen-Selektoren
Während Typenselektoren sämtliche Elemente die dem Typ entsprechen auswählen, wählen Klassenselektoren nur jene Elemente aus, denen eine "class" zugewiesen wurde. Egal wo sich die Elemente auf der Seite befinden.
Beispiel class-Selektoren:
HTML:
<header>
<p>Firmenlogo</p>
<nav>
<ul>
<li><a class="rot" href="#">Link 1</a></li>
<li><a class="gelb" href="#">Link 2</a></li>
<li><a class="pink" href="#">Link 4</a></li>
<li class="grau">Listenelement, nur Text</li>
</ul>
<ul>
<li class="grau">Adresse:</li>
<li class="gelb">Raffke &Gierschlund</li>
<li class="pink">Nimmersattstr. 12</li>
<li class="rot">1234 Golden Town</li>
</ul>
</nav>
</header>
CSS:
.rot {
font-weight: bold;
color: #fff;
background-color: red;
}
.gelb {
font-weight: bold;
background-color: yellow;
}
.pink {
font-weight: bold;
background-color: pink;
}
.grau {
font-weight: bold;
color: #fff;
background-color: gray;
}
Der Vorteil von Class-Selektoren ist, dass der dazugehörende CSS-Code nur einmal geschrieben werden muss. Danach kann er überall auf der/den Seite(n) wiederverwendet werden.
Typenselektoren und Klassen kombinieren:
Im vorletzten Beispiel mit den beiden ul's standen wir vor dem Problem, das linke ul herauszufischen.
Hier wäre eine Kombination aus Typ-u. Klassenselektor auch möglich gewesen.
Beispiel Typ-u. Klassenselektor:
HTML:
<header>
<p>Firmenlogo</p>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a class="rot" href="#">Link 2</a></li>
<li><a href="#">Link 4</a></li>
<li>Listenelement, nur Text</li>
</ul>
<ul>
<li>Adresse:</li>
<li>Raffke &Gierschlund</li>
<li>Nimmersattstr. 12</li>
<li class="rot">1234 Golden Town</li>
</ul>
</nav>
</header>
CSS:
ul li .rot {
font-weight: bold;
color: red;
}
ul:nth-child(2) .rot {
font-size: 300;
color: red;
background-color: yellow;
}
ul und li sind Typselektoren und .rot ist ein Klassenselektor.
Auflistung von weiteren Selektoren
Beispiel: Element-Selektor
Wählt alle angegebenen Elemente, egal wo sie stehen.
HTML:
<header>
<p>Firmenlogo</p>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 4</a></li>
<li>Listenelement, nur Text</li>
</ul>
<div>
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
<p>Text 4</p>
<p>Text 5</p>
</ul>
</nav>
</header>
CSS:
p {background-color: red;}
ul {background-color: yellow;}
div {background-color: lightgreen;}
a {background-color: lightblue;}
Beispiel: Element => Class-Selektor
Wählt alle Elemente die ein Kindelement mit der class="blafasel" haben, egal wo sie stehen.
HTML:
<header>
<p class="blafasel">Firmenlogo</p>
<nav>
<ul>
<li class="blafasel"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 4</a></li>
<li>Listenelement, nur Text</li>
</ul>
<div>
<p>Text 1</p>
<p>Text 2</p>
<p class="blafasel">Text 3</p>
<p>Text 4</p>
<p>Text 5</p>
</ul>
</nav>
</header>
CSS:
p.blafasel {background-color: yellow;}
li .blafasel {background-color: yellow;} Funktioniert nicht: es darf kein Leerzeichen dazwischen li und .blafasel sein!
Beispiel: Class => Class-Selektor
Je nach Schreibweise ;-)
.blafasel.fett oder
.blafasel .fett
CSS:
Beide Klassen müssen an dem Element vorhanden sein.
Achtung: ohne Leerzeichen!
blafasel.fett {
background-color: yellow;
}
.fett {
font-weight: bold;
color: green;
}
Mit Leerzeichen!
Hier ist .blafasel das Elternelement von .fett.
.blafasel .fett {
background-color: lawngreen;
}
Beispiel: Element + erster Nachfahre
Das vorherige Element muss mit seinem Endtag geschlossen sein.
CSS:
h1 + p {background-color: red;}
div-1 + p {background-color: green;}
div-2 + p {background-color: yellow;}
Weitere brauchbare Selektoren
Beispiel: ::before, ::after, :first-child, :last-child
Bitte aufpassen: :: oder :
CSS:
h1::before {
content: "h1::before ";
color: red;
}
h1::after {
content: " h1::after ";
color: red;
}
p:first-child {
background-color: yellow;
}
p:last-child {
background-color: lightgreen;
}
Weitere brauchbare Selektoren
Beispiel: p:nth-child(2), p:nth-of-type(2)
Bitte aufpassen: :: oder :
CSS:
.div-1 p:nth-child(2) {
background-color: yellow;
}
.div-1 p:nth-child(5) {
background-color: yellow;
}
.div-2 p:nth-child(1){
background-color: yellow;
}
.div-2 p:nth-of-type(3){
background-color: red;
}
.div-2 p:nth-of-type(4){
background-color: red;
}
/* Hier funktioniert (5) nicht aber (6)?! Warum? */
.div-2 p:nth-child(6){
background-color: yellow;
}
Weitere brauchbare Selektoren
Beispiel: first-of-type und last-of-type
Bitte aufpassen: :: oder :
CSS:
p:first-of-type {
background-color: yellow;
}
p:last-of-type {
background-color:lightgreen;
}
li:first-of-type {
background-color: yellow;
}
li:last-of-type {
background-color: lightgreen;
}
Noch ein paar Selektoren, dann ist Schluss.
Beispiel: :nth-of-type(), p::first-letter, p::first-line
Bitte aufpassen: :: oder :
CSS:
.div-1 p:nth-of-type(2){
background-color: yellow;
}
.div-1 p:nth-of-type(5){
background-color: yellow;
}
/* Das zweite Div und dann H3 */
div:nth-of-type(2) h3{
color: red;
}
/* Nachstehendes gilt für den Text weiter unten */
First Letter:
.p1 {
text-align: unset; /* Textposition zurücksetzen, war center */
text-indent: 2em; /* Erste Zeile einrücken */
}
.p1::first-letter {
font-size: 2rem; /* Erster Buchstaben einrücken */
color: red; /* Erster Buchstaben rot */
}
First Line:
.p2{
text-align: unset; /* Textposition zurücksetzen, war center */
}
.p2::first-line {
color: red; /* Erste Zeile rot */
}
Keine Angst...
Das war jetzt alles etwas viel und überwältigend. Lassen Sie sich nicht entmutigen, Sie lernen das in der Praxis viel einfacher als beim blosen Lesen.
Sie haben auf dieser Seite gelesen, wie man ein Kästchen adressieren kann/könnte.
Das ist die unbedingte Voraussetzung um die HTML-Elemente auch platzieren oder verschieben zu können.
Als Nächstes wäre jetzt die Positionierung dran.
Bilder (hätte ich zuerst auch nicht geglaubt!)