Gebundene Selektoren

Gebundene Selektoren werden ohne Leerzeichen aneinander gesetzt.

Mit gebundenen Selektoren kann man eine Klasse oder Id an ein Element binden. Das bedeutet, dass diese Formatierung nur dann zutrifft, wenn das Element die Klasse besitzt.

Im folgenden Fall würde die Klasse .wichtig an ein h1 gebunden die Schriftfarbe red bekommen ansonsten green.

.wichtig{color:green;}
  h1.wichtig{color:red;}

Es ist ein Bedingung im Sinne von das und das und das muss zugewiesen sein.

#firma.wichtig.info{color:purple;}
    
 <div id="firma" class="wichtig info">   
    

Attribut Selektor

Selektor[Attribut] {Eigenschaft: Wert}

Beispiel

a[rel] {background-color: #fab;}

Mit dem Attribut Selektor kann man bestimmte Elemente mit einem Attribut auswählen. Im vorigen Beispiel alle a- Elemente mit dem Attribut rel. Es ist außerdem möglich, die Werte der Attribute abzufragen. So dass ein Element nur ausgewählt wird, wenn das Attribut einen bestimmten Wert hat, oder wenn in der Wertzuweisung bestimmte Phrasen vorkommen. Hierzu gibt es ein paar ausgeklügelte Abfragen.

Kombinatoren

Kombinatoren sind Zeichen, mit denen Selektoren miteinander verkettet werden. Das zuletzt aufgeführte Element wird angesprochen.

• Leerzeichen Nachfahren Kombinator
• > Kind Kombinator
• ~ Geschwister Kombinator
• + Nachbar Kombinator

descendant combinator / Nachfahren Kombinator

Selektor1 Selektor2 {Eigenschaft: Wert}

Beispiel

p b {color: #000;}

Ein Leerzeichen ist ein Nachfahren Kombinator. Mit dem Nachfahren Kombinator kann man bestimmen, dass Elemente nur ausgewählt werden, wenn sie sich innerhalb anderer Elemente befinden. Im Beispiel oben wird b nur dann formatiert, wenn es sich in einem p befindet. Man spricht hier auch von abhängigen Selektoren.

so sieht's aus

Es lassen sich auch mehrere Nachfahren bestimmen. Im folgenden Beispiel wird eine untergeordnete, verschachtelte Liste angeprochen.

ul li ul

child combinator / Kind Kombinator

Selektor1 > Selektor2 {Eigenschaft: Wert}

Beispiel

p > b {color: #000;}

Der Kind Selektor ist ein direkter Nachfahre.

so sieht's aus

general sibling combinator / Geschwister Kombinator

Im folgenden wird die CSS Eigenschaft dem Selektor2 zugewiesen.

Selektor1 ~ Selektor2 {Eigenschaft: Wert}

Beispiel

CSS

cite ~ b {background-color: #fab;}

HTML

<cite>Brazil</cite> ist das Meisterwerk von <b>Terry Gilliams</b>

Folgende Reihenfolge ist beim oben aufgeführten CSS nicht erlaubt.

<b>Terry Gilliams</b>der Regisseur von <cite>Brazil</cite>

Der general sibling combinator weist die Eigenschaft dem Selektor2 nur zu, wenn Selektor1 und Selektor2 dasselbe Eltern Element besitzen und Selektor 2 auf Selektor 1 folgt (er muss nicht unbedingt direkt darauf folgen). Siehe dazu auch den nachfolgenden Beitrag Nachbar Selektor.

so sieht's aus

Der Geschwister Selektor wird im Zusammenhang mit einer Pseudoklasse wie .hover oder .selected interessant.

so sieht`s aus

adjacent sibling combinator / Nachbar Geschwister Kombinator

Selektor1 + Selektor2 {Eigenschaft: Wert}

Beispiel

cite + small {background-color: #fab;}

Der adjascent sibling combinator weist die Eigenschaft dem Selektor2 nur zu, wenn Selektor1 und Selektor2 direkt aufeinander folgen und wenn beide dasselbe Eltern Element besitzen.

so sieht's aus

Hier ein weiteres typisches Beispiel mit Überschriften

so sieht's aus

Hier ein weiteres typisches Beispiel mit einer Definition List. Hier wird immer die erste der beiden dd-Elemente angefasst.

Pseudoklassen

siehe auch Pseudoelemente

Siehe Pseudoklassen bei Selfhtml

Siehe die Übersicht Pseudoklassen / Pseudoelemente
Siehe Pseudoklassen w3schools

Bei Pseudoklassen handelt es sich um einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft besitzt oder sich in einen bestimmten Zustand befindet, wie beispielsweise einer Mausberührung (:hover) durch den User.

Oder der Selektor ergibt sich aus einem bestimmten Umstand heraus. So lassen sich zum Beispiel Elemente auswählen, die das erste Kindelement eines anderen Elementes sind.

Pseudoklassen werden mit einem Doppelpunkt notiert und sollten an einen einfachen Selektor angehängt werde siehe gebundene Selektoren
a:visited

siehe auch Wikibooks

• Dynamische Pseudoklassen
• :link :visited
• :hover :active :focus
• :checked
• :lang
• :not
• Strukturelle Pseudoklassen
• :first-child
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :target

Dynamische Pseudoklassen

Link Pseudoklassen :link und :visited

Besuchte und unbesuchte Hyperlinks, also a Elemente mit dem Attribut href werden vom Default Style des Browsers anders eingefärbt. Hier kann man mit den Pseudoklassen :link und :visited eigene Formatierungen vornehmen. :link steht für unbesuchte und :visited für besuchte Links. Sie hängen ab von der Navigationshistorie des Browsers.

:link {Eigeschaft:Wert;}
:visited {Eigeschaft:Wert;}

Wenn man die :link Eigenschaft des Browsers überschreiben möchte notiert man einfach das a Ankerelement, denn das hat eine höhere Spezifität. a {Eigenschaft: Wert;}

Beispiel

Pseudoklassen :hover :active :focus

Am häufigsten wird man :hover einsetzen, denn es bedeutet, der Link wird mit Maus berührt. :active steht für Klick und :focus wenn der Fokus auf den Link gesetzt wird, das kann auch mit der Tabulator Taste geschehen.

Auf dem Smartphone gibt es keinen :hover. Da das :focus einem Touch Event entspricht, wählt man für :hover und :active die gleichen Farben.

Ein focus funktioniert nur bei Elemente die anklickbar oder auswählbar sind. Die Elemente sind: a, input, button. Mit dem HTML- Attribut tabindex kann man ein Element anklickbar machen.

a:focus {Eigeschaft:Wert;}
a:hover {Eigeschaft:Wert;}

a:active {Eigeschaft:Wert;}

:active wirkt nur auf den Klick in dem Moment wenn man draufdrückt.

Beispiel

Es gibt kein Hover auf Smartphones!
Tabletts und Smartphones übersetzen ein :hover über einem Link direkt in einen Mausklick.

Pseudoklasse :checked

Mit der Pseudoklasse checked kann man überprüfen, ob eine Checkbox, ein Radiobutton oder ein Element einer Auswahlliste Liste aktiviert ist.

so sieht`s aus

Hier wird das Geschwisterlement .info eingeblendet. In dem Beispiel wurde auch ein Geschwister Kombinator eingesetzt.

so sieht`s aus

Das lässt sich wunderbar dazu einsetzen, ein Menü ein und auszublenden. Außerdem wurde das <input type="checkbox"> ausgeblendet, da man auch über das Label Element die Checkbox steuern kann.

so sieht`s aus

Weitere Beispiele zum Thema Menüs ein- und ausblenden.

Pseudoklasse :lang

div:lang(en) {color: #fab;}

Hiermit werden Elemente ausgewählt, denen in HTML eine bestimmte Sprache zugewiesen wurde.

Pseudoklasse :not()

siehe auch Wiki

div:not(#footer) {color: #fab;}

Hiermit lassen sich Elemente ausschließen. Im Beispiel werden alle divs ausgewählt, bis auf das div, dem die id="footer" zugewiesen wurde.

Beispiel

Ein anderes nützliches Beispiel ist, dass man alle a- Elemente auswählt die als Links fungieren, bis auf die a- Elemente welche mit dem veraltetem name Attribut versehen sind, um als Anker zu dienen. Stattdessen könnte man aber auch genausogut alle a Elemente mit dem Attribut href wählen. Das funktioniert genausogut.

a:not([name]) {background-color: #fab;}
so sieht`s aus

Strukturelle Pseudoklassen

Pseudoklasse :first-child

li:first-child{background-color: #fab;}

Beispiel

Das erste Kindelement eines übergeordneten Elements. In diesem Falle das erste li Element.

Pseudoklasse :nth-child(n)

nth-child Selfhtml Wiki / nth-test

Beispiel

Beispiel mit mehreren Pseudo Selektoren

Hiermit lässt sich das soundsovielte Kindelement des Elternelements auswählen. nth kommt vom englischen the seventh. In der Kurzschreibweise 7th. Nun braucht man nur noch anstatt 7 n für Number einsetzen und es macht Sinn.

Hier wird das 3 li Element seines Elternelements ausgewählt.

li:nth-child(3) {background-color: #fab;}

h3:nth-child(1) würde in der unten stehenden Aufführung nicht greifen, weil die h3 kein erstes Kind vom body ist

<body>
<h1></h1>
<section></section>
<h3></h3>
</body>

Mit anderen Worten, wenn es auch Kindelemente eines anderen Typs gibt, werden diese mitgezählt.
so sieht`s aus

Pseudoklasse :nth-last-child(n)

li:nth-last-child(3) {background-color: #fab;}

Beispiel

Hierbei wird von hinten gezählt.

Pseudo :nth-last-child()

Pseudoklasse :nth-of-type(n)

p:nth-of-type(2n) {color: #fab;}

Beispiel

Im diesem Beispiel werden nur die Elemente gleichen Typs, also alle p-Elemente eingefärbt.

Was genau der Unterschied zwischen nth-child und nth-of-type ist, kann man an diesen beiden Beispiele sehen.
Beispiel nth-child
Beispiel nth-of-type

Pseudoklasse :target

siehe auch w3schools

Mit Ankerlinks hat man die Möglichkeit zu einem bestimmten Bereich der Webseite per Link zu springen. Nun hat man die Möglichkeit den aufgerufenen target-Bereich mit CSS Formatierungen zu versehen, nachdem man auf den Link geklickt hat. Das bietet viele Möglichkeiten von drop Down Menüs bis hin zu Modals.

Achtung Die target-id erscheint oben in der Adresszeile des Browsers. meineSeite.html#meineId
Achte beim Testen und Neuladen darauf, dass die Seite ohne die Id geladen wird um den ursprünglichen Zustand wieder herzustellen. meineSeite.html

Beispiel 1 im neuen Fenster

	.ziel {
		display: none;
	}
	:target {
		display: block;
	}

HTML

<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>


<div id="link1" class="ziel">Target 1</div>
<div id="link2" class="ziel">Target 2</div>
<div id="link3" class="ziel">Target 3</div>

open close

Im folgendem Beispiel werden Bereiche ein- und ausgeblendet. Im Beispiel befinden sich die Erklärungen.

siehe hier im neuen Fenster

Ein ähnlich aufgebautes Beispiel, schöner formatiert aber ohne Erklärungen

siehe hier im neuen Fenster

Modal

Ein Modal nennt man die Darstellung von Inhalten, welche auf Mausklick erscheinen und über der gesamten Seite liegen. Sie haben in der Regel einen halbtransparenten Hintergrund, so dass im Hintergrund die eigentliche Seite durchscheint.

Ich habe hier 2 Beispiele, die jeweils in 2 Schritten vorgestellt werden.

Beispiel 2

Beispiel 2 Step 1 im neuen Fenster / Beispiel 2 Step 2 im neuen Fenster / Beispiel 2 Step 3 im neuen Fenster

Modal oder Lightbox mit mehreren Bildern. Das Modal wird mittels flex Eigenschaften mittig auf der Seite plaziert.

Für derlei Galerien gibt es komfortable Frameworks siehe hier

Beispiel 3

Auch das folgende Beispiel wird in 2 Schritten vorgestellt. Hier wird lediglich ein Modal eingeblendet.

1. Beispiel 3 Step 1 Hier wird das Modal erstellt. Das CSS dient dazu, dass sich das Modal über die gesamte Breite und Höhe ausbreitet und der eigentliche Inhalt mittig plaziert wird. In diesem Beispiel wird display:table eingesetzt.
2. Beispiel 3 Step 2 Hier kommt der Ankerlink und die Pseudoklasse :target hinzu, um das Modal einzublenden.

Pseudoelemente

Siehe Pseuoelemente bei Selfhtml

Pseudoelemente beschreiben Elemente, die nicht vom Document Tree DOM abgeleitet werden können.  Ein Pseudoelement erzeugt einen nicht im Elementbaum vorhandenen Abschnitt, der formatiert oder mit Inhalt gefüllt werden kann. Pseudoelemente sind Elemente wie etwa das erste Zeichen oder die erste Zeile eines Absatzes. Mit Pseudoelementen können Strukturen vor oder nach dem Inhalt eines Elementes eingefügt werden, etwa eine automatische Numerierung oder Anführungszeichen bei Zitaten, aber es können auch inhaltlich nicht relevante Texte oder Bilder hinzugefügt werden.

Pseudoelemente werden mit 2 Doppelpunkten notiert und sollten an einen einfachen Selektor angehängt werden siehe gebundene Selektoren
::selection

https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoelement

Es gibt folgende Pseudoelemente.

• ::first-line
• ::first-letter
• ::before, ::after
• ::backdrop neue Seite siehe auch Wiki
• ::selection
• ::backdrop
• ::placeholder

Pseudoelemente ::first-line und ::first-letter

p::first-line {Eigeschaft:Wert;}
article::first-letter {Eigeschaft:Wert;}

Beispiel

Mit :first-line wird die erste Zeile ausgewählt. Mit first-letter der erste Buchstabe. Hiermit lassen sich in der Tradition der alten Bibeln große Anfangsbuchstaben erzeugen.

Pseudoelemente ::before und ::after

a::before {Eigenschaft: Wert;}
a::after {Eigenschaft: Wert;}

Mit diesen beiden Pseudo Elementen kann man beispielsweise Bilder oder Text vorne oder hinten an das Element hinzufügen. Dazu verwendet man die Eigenschaft content mit einem url() Wert. Eine andere Möglichkeit wäre es die Währung hinter den Preis zu notieren.

Achtung! Es ist wichtig zu verstehen, dass die angehängten Elemente nicht nach dem Blockelement aufgeführt werden sondern innerhalb davon, an erster oder an letzter Stelle.

h1.gebet::before {content: url("../../img/gebet.gif");

Beispiel mit Bildern

td:nth-child(3)::after{content:" EUR";}

Beispiel mit Text

Beipsiel mit Sprechblase

weitere Varianten Sprechblasen: mit after

Siehe auch das Beispiel clearfix

Beispiel mit animierten Unterstrich

Pseudoelement ::selection

::selection Wiki

Hiermit kann die Hintergrundfarbe und die Schriftfarbe eines ausgewählten Textes formatiert werden.
Im nachfolgenden Beispiel wird bei der Auswahl des Textes eines pre Elements eine weiße Schrift auf schwarzem Grund angezeigt.

siehe Beispiel

pre::selection{
background-color: black;
color: white;
}

Pseudoelement ::backdrop

siehe auch Wiki

Das Pseudoelement ::backdrop erzeugt einen Hintergrund, zwischen dem Dokument und einem Element welches auf dem top layer liegt, beispielsweise das HTML dialog Element. Mittels ::backdrop kann man diesem erzeugten Hintergrund verschiedene CSS Eigenschaften zuweisen. In der Regel ist das aber nur eine halbtransparente Hintergrundfarbe.

Ein HTML dialog Element erscheint erst, wenn man es mittels Javascript öffnet. Es ist zwar auch möglich das standalone Attribut open im dialog Element einzufügen, um es beim Aufruf der Seite sichtbar zu machen, aber dann greift die Eigenschaft ::backdrop nicht, weil kein Hintergrund erzeugt wurde.

Die Javascript Befehle zum öffnen und schließen lauten:

dialog.show();  dialog.showModal();  dialog.close();

Nur der Befehl dialog.showModal() legt das dialog auf den Top-Layer, um einen Hintergrund zu ermöglichen.

Beispiel

CSS

dialog::backdrop {
  background: rgba(0,0,0,0.6);
  }

HTMl & Javascript

 <button onClick="document.getElementsByTagName('dialog')[0].showModal()">Open</button>

<dialog>Text im Dialog Element....
 <button onClick="document.getElementsByTagName('dialog')[0].close()">Close</button>    
</dialog>

Die [0] verweist auf das erste dialog Element auf der Seite. Wenn es mehrere geben würde, könnte man das zweite mit [1] ansprechen.

document.getElementsByTagName('dialog')[0]

Pseudoelement ::placeholder

siehe auch ::placeholder bei Wiki

Mit ::placeholder kann man den Placeholder Text eines Input- oder Textarea- Elements formatieren.

HTML

<input type="text" placeholder="Bitte eingeben">

CSS

input::placeholder{color: green;}