Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)

HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)

Ihr könnt sogenannte Kindelemente ansprechen. Das sind solche, die anderen Elementen direkt untergeordnet sind. Das klingt zugegebenermaßen etwas abstrakt, lässt sich aber schön anhand eines Beispiels erklären.
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
</body>

Hier ist body das Elternelement. Die p-Elemente sind jeweils Kindelemente von body. Auf diesem Wissen aufbauend, lässt sich der Kindelement-Selektor anwenden.
body>p { 
   color: blue; 
}

Diese Syntax setzt alle Absätze, welche direkte Kinder von body sind, auf blaue Farbe um.

Das folgende Beispiel zeigt noch einmal die Unterschiede zwischen den beiden Anweisungen body p und body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}
body p {
   color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
  <p>Absatz 4</p>
</div>
</body>
</html>
 
 
Die ersten drei definierten p-Textabsätze sind direkte Kinder von body. Die Anweisung body p weist allen Textabsätzen eine blaue Schrift zu. body>p wiederum wirkt sich ausschließlich auf die ersten drei Textabsätze aus. Daher werden diese Absätze auch in einer größeren Schrift angezeigt.

Bilder


 
 
Als Nächstes möchte ich euch den Folgeelement-Selektor vorstellen. Dieser Selektor markiert ein Element, das unmittelbar auf ein anderes Element folgt und mit diesem dasselbe Elternelement besitzt. Auch hierzu wieder ein Beispiel:
h1+p { 
   color: blue; 
}

Durch diese Syntax wird die Textfarbe eines Absatzes auf Blau gesetzt. Das gilt allerdings nur, wenn sich der Absatz direkt an eine Überschrift der ersten Ordnung anschließt.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
   color: blue;
}
</style>
</head>
<body>
<h1>Überschrift</h1>
<p>Absatz 1</p>
<h2>Überschrift</h2>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
  <p>Absatz 4</p>
</div>
</body>
</html>
 
 
Seht euch das Ergebnis im Browser an.

Bilder



Nur der erste Absatz wird hier in blauer Schrift angezeigt. Die anderen Absätze sind schwarz. Das liegt daran, dass diese p-Elemente nicht auf h1, sondern auf h2 folgen.
 
 
Hinsichtlich der Folgeelemente wurden in CSS3 übrigens weitere Möglichkeiten eingeführt. So ist es ab sofort möglich, auf alle Folgeelemente eines bestimmten Elements zuzugreifen. Ein Beispiel:
h1~p { 
   color: red; 
}

Durch diese Syntax werden alle Absätze, die auf h1 folgen, angesprochen.

Bilder


 
 
Man kann übrigens nicht nur Elemente direkt ansprechen. Auch ein Zugriff über die Attribute der Elemente ist möglich.

Hier einige dieser Selektoren:

• [att] – Das Element muss nur das Attribut enthalten. Ob auch ein Wert übergeben wird, ist unerheblich.
• a[href] – Es werden alle Hyperlinks (<a href=...>) markiert. Auf Anker-Definitionen (<a name=...>) trifft das jedoch nicht zu.
• [align=left] – Markiert alle Elemente, deren Attribut align den Wert left besitzt.
• [attr~=wert] – Es werden alle Elemente markiert, in denen wert in einer durch Leerzeichen getrennten Werteliste enthalten ist.
• [attr|=wert] – Markiert ein Element, wenn innerhalb des Attributs der angegebene Wert am Anfang einer durch Bindestrich getrennten Zeichenfolge steht.
• img[width="200"] – Hier werden alle Grafiken markiert, die eine Breite von 200 Pixel besitzen.

Stellt sich natürlich die Frage, wann man eigentlich solche Attribut-Selektoren brauchen könnte. Denkt beispielsweise an ein Formular und darin definierte Checkboxen. Checkboxen werden – das wisst ihr mittlerweile – über das input-Element definiert. Das Problem dabei: Das input-Element wird auch für die Definition normaler Texteingabefelder verwendet. Somit kann man über input keine unterschiedliche Formatierung für Checkboxen und Texteingabefelder vornehmen. Genau an diesem Punkt setzen die Attribut-Selektoren an. Werft für deren besseres Verständnis einen Blick auf folgendes Beispiel:
<body>
 Name: <input type="text" id="name" />
 <br />
 Mann: <input type="checkbox" name="geschlecht" id="geschlecht" />
 <br />
 Frau: <input type="checkbox" name="geschlecht" id="geschlecht" />
 </body>

Hier wurden verschiedene Formularelemente definiert.

• ein Texteingabefeld
• zwei Checkboxen

Diese Felder sollen formatiert werden.
input { 
    border:3px solid #000;
    width: 10em;
 }
 
 
Zugewiesen werden den Feldern ein Rahmen und eine Breite.

Bilder


 
 
Das Problem dabei: Die definierte Breite sollte eigentlich nur auf das Texteingabefeld, nicht aber auf die Checkboxen angewendet werden. Durch den Elementselektor ist hier allerdings keine Unterscheidung zwischen den unterschiedlichen Feldtypen möglich. Damit eine solche Unterscheidung klappt, wird auf Attributselektoren gesetzt. Hier ein Beispiel dafür, wie so etwas aussehen kann:
input[type="checkbox"] {
    width: auto;
 }

Durch den gezeigten Selektor wird tatsächlich nur auf solche input-Elemente zugegriffen, welche die Attribut-Wert-Kombination type="checkbox" besitzen.

Bilder


 
 

Wiederholungen

CSS bietet nun endlich auch die Möglichkeit, Wiederholungen anzusprechen. Stellt sich natürlich die Frage, wofür so etwas gut sein kann. Sinnvoll sind diese Selektoren beispielsweise, wenn man jede zweite Zeile einer Tabelle andersfarbig gestalten will. Bevor ich die verfügbaren Selektoren vorstelle, ein ganz typisches Beispiel:
<ol id="sprachen">
    <li>HTML</li>
    <li>HTML5</li>
    <li>CSS</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    <li>JScript</li>
    <li>Java</li>
    <li>PHP</li>
    <li>Python</li>
</ol>

Hierbei handelt es sich um eine normale Aufzählungsliste. Mittels CSS soll nun jeder dritte Listeneintrag eine Hintergrundfarbe zugewiesen bekommen.

Bilder


 
 
Verwendet wird dafür der Selektor nth-child(). Über diesen Selektor wird jedes n-te-Kindelement angesprochen.
#sprachen li:nth-child(3n) {
    background-color: red;
}

Die folgenden Selektoren stehen zur Verfügung:

• :root – Mittels des Selektors :root lässt sich die Wurzel eines Dokumentes ansprechen.
• :nth-child(n) – Steuert jedes n-te Element innerhalb eines Elternelements an. Hilfreich ist dieser Selektor vor allem, wenn mehrere Elemente unterschiedlich gestaltet werden sollen. Bei n handelt es sich um ein feststehendes Schlüsselwort, auf das sich Rechenoperationen anwenden lassen. n lässt sich mit dem Wert 1 gleichsetzen.
• :nth-last-child(n) – Steuert jedes n-te Element in einem Element, wobei die Kindelemente von hinten durchlaufen werden.
• :nth-of-type(n)–  Steuert jedes n-te Element vom gleichen HTML-Typ auf gleicher Ebene.
• :nth-last-of-type(n) – Steuert jedes n-te Element auf gleicher Ebene, wobei die Elemente von hinten durchlaufen werden.
• :first-child – Steuert das erste Kindelement innerhalb eines Elements.
• :last-child – Steuert das letzte Kindelement innerhalb eines Elements.
• :first-of-type – Steuert das erste Element des gleichen HTML-Elementtyps innerhalb eines Elternelements.
• :last-of-type – Steuert das letzte Element des gleichen HTML-Elementtyps innerhalb eines Elternelements.
• :only-child – Steuert ein Element, welches kein Geschwisterelement besitzt und das einzige Kindelement im übergeordneten Element präsentiert.
• :only-of-type – Steuert ein Element, welches keine Geschwisterelemente vom gleichen HTML-Typ besitzt und damit das einzige Kindelement dieser Sorte im übergeordneten Element darstellt.
• :empty – Steuert leere Elemente.

Die vorgestellten Selektoren machen die Arbeit mit HTML deutlich einfacher, da aufwendige Klassendefinitionen der Vergangenheit angehören.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:34

Danke schön.

Portrait von Kiasa
  • 25.06.2015 - 09:52

... und herzlichen Dank auch für das PDF :)

Portrait von Kiasa
  • 30.03.2015 - 10:42

Herzlichen Dank für das tolle Video!

Portrait von Lordi
  • 14.02.2015 - 12:22

ein wirklich klasse Tut.

Portrait von Luther_Sloan
  • 12.02.2015 - 16:34

Vielen Dank für das weitere informative Tutorial.

Portrait von arko2013
  • 12.02.2015 - 16:32

Vielen Dank für das gute Tutorial und deine Erklärungen.

Portrait von MARIA52
  • 12.02.2015 - 15:45

Vielen Dank für den weiteren Teil.

Portrait von pseka
  • 12.02.2015 - 15:19

War leider nicht mein Thema, kann deshalb auch kein Feedback abgeben. Sorry

Portrait von renate_C
  • 12.02.2015 - 13:55

Ich bedanke mich für das wieder sehr interessante und lehrreiche Texttutorial.

Portrait von Caesarion2004
  • 12.02.2015 - 13:52

Vielen Dank für ein weiteres, gut erklärtes und informatives Tutorial.

Portrait von pallasathena
Portrait von fe_web
  • 12.02.2015 - 12:44

Super erläutert - Vielen Dank

Portrait von BOPsWelt
  • 12.02.2015 - 12:20

Vielen Dank für einen weiteren Teil. :)

Portrait von DoctorG
  • 12.02.2015 - 12:10

Prima erläutert - danke.

Portrait von teste123
  • 12.02.2015 - 12:06

Vielen Dank
MfG


Portrait von Kundentest
  • 12.02.2015 - 12:05

Herzlichen Dank für das Tutorial.

Portrait von samtron
  • 12.02.2015 - 12:05

Vielen Dank
MfG


Portrait von MicroSmurf
  • 28.12.2014 - 18:35

Gut zur Auffrischung. Vielen Dank.

Portrait von Kundentest
  • 28.12.2014 - 15:28

Herzlichen Dank für das Video.

Portrait von MARIA52
  • 28.12.2014 - 14:24

Vielen Dank für das Video.

x
×
×