Es gibt viele Möglichkeiten Selektoren zu defininieren. Man sollte auch hier nicht versuchen Lösungen zu finden, zu Problemen, die es gar nicht gibt.
Man kann mehrere CSS Dateien einbinden und zusätzlich auf der einzelnen Seite definieren.
Generell gilt die vom Browser zuletzt aufgerufene Style Anweisung überschreibt frühere Formatvorgaben. Das ist das Prinzip der Kaskadierung.
Von dieser Rangfolge unabhängig überschreiben genauere Angaben ungenauere Angaben. Was das im einzelnen zu bedeuten hat, kann man an dem Punktesystem der Spezifität ermitteln.
Selektor | Beispiel | Spezifität (Punkte) |
Globalselektor | * | |
Elementselektor Pseudoelement |
body, div, p, b, a a:before |
1 |
Klassenselektor Attributselektor Pseudoklasse |
.grau, .name |
10 |
ID-Element | #leinwand, #kopf, #fusszeile | 100 |
Style als HTML Attribut | style="color: red" | 1000 |
Selektor | A | B | C | D |
---|---|---|---|---|
style= (HTML) |
1 | 0 | 0 | 0 |
#nav a.xy |
0 | 1 | 1 | 1 |
#nav li a |
0 | 1 | 0 | 2 |
#nav a |
0 | 1 | 0 | 1 |
#nav |
0 | 1 | 0 | 0 |
ul li .xy |
0 | 0 | 1 | 2 |
a:link |
0 | 0 | 1 | 1 |
a.xy |
0 | 0 | 1 | 1 |
ul[id="nav"] |
0 | 0 | 1 | 1 |
*.xy |
0 | 0 | 1 | 0 |
li a |
0 | 0 | 0 | 2 |
a |
0 | 0 | 0 | 1 |
Eine weitere Ansicht mit Beispielen der Spezifität findet man auch unter Spezifität bei Selfhtml.
!important
Die mit !important ausgezeichneten Deklarationen überschreiben die Spezifität. Die Zeichenkette !important wird nach einem Leerzeichen hinter dem Wert notiert. Sie muss für jede Eigenschaft extra gesetzt werden.
Benutzen Sie die !important Regel jedoch nicht, weil es einfach ist, sondern suchen Sie erst nach dem Grund, warum eine Regel nicht so funktioniert, wie Sie es erwarten. Das Problem bei important ist, dass es die Spezifität außer Kraft setzt. Um ein !important auzuhebeln braucht man wieder ein !important. Daher greift dann nur noch die Reihenfolge.
p { font-size:1em !important; }
Mit dem Sternchen werden alle Elemente ausgewählt. Diesen Selektor kann man dazu einsetzen, eine einheitliche Ausgangssituation zu schaffen. Siehe dazu das Thema Reset
* {Eigenschaft: Wert}
* {color: #000;}
Html-Element {Eigenschaft: Wert}
Beispiel
p {color: #000;}
Die einfachste Art eine CSS Eigenschaft zuzuweisen ist per Element Selektor. Gerade in HTML5, wo es viele neue semantische Elemente gibt.
.Klassenname {Eigenschaft: Wert}
.tipp {background-color: #fab;}
Wenn die sematischen Elemente in HTML5 nicht mehr ausreichen kann man eigene Klassen definieren. Es sind Elemente mit Gemeinsamkeiten. Man weist einem HTML Element eine Klasse mit dem Schlüsselwort class zu.
<p class="tipp">Das p- Element steht für Absatz</p>
In der Style Defininition wird der Klassenselektor ein Punkt vorangestellt, gefolgt vom Namen der Klassen. Es gelten die üblichen Regeln für die Namensvergabe und der Klassenname sollte nicht mit einer Zahl beginnen.
Man kann einem Element auch mehrere Klassen zuweisen. Die Namen werden innerhalb der Wertzuweisung mit Leerzeichen aufgeführt. Im folgenden Beispiel wurden dem p- Element die Klassen tipp und wichtig zugewiesen.
<p class="tipp wichtig">Das P Element</p>
#IdName {Eigenschaft: Wert}
#werbung {background-color: #fab;}
Ähnlich wie der Klassenselektor erstellt man eigene IDs und weist diese einem HTML Element zu. Im Gegensatz zur Klasse, darf eine ID mit einem Wert dokumentweit nur einmal zugewiesen werden. Eine Klasse kann man auch mehreren Element zuweisen. Eine id dient als eindeutige Identifizierung einer bestimmten Stelle im HTML Dokument. Sie wird auch für Programierungen und für Ankerlinks verwendet. Es gelten die Reglen der Namensvergabe und eine Id sollte nicht mit einer Zahl beginnen.
<div id="werbung">Werbebanner</div>
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">
Kombinatoren sind Zeichen, mit denen Selektoren miteinander verkettet werden. Das zuletzt aufgeführte Element wird angesprochen.
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.
Es lassen sich auch mehrere Nachfahren bestimmen. Im folgenden Beispiel wird eine untergeordnete, verschachtelte Liste angeprochen.
ul li ul
Selektor1 > Selektor2 {Eigenschaft: Wert}
Beispiel
p > b {color: #000;}
Der Kind Selektor ist ein direkter Nachfahre.
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.
Der Geschwister Selektor wird im Zusammenhang mit einer Pseudoklasse wie .hover oder .selected interessant.
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.
Hier ein weiteres typisches Beispiel mit Überschriften
Hier ein weiteres typisches Beispiel mit einer Definition List. Hier wird immer die erste der beiden dd-Elemente angefasst.
Selektor[Attribut] {Eigenschaft: Wert}
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.
[Attribut] |
a[rel] {background-color: #fab;} |
Jedes Element mit diesem Attribut |
[Attribut="Wert"] |
a[rel="external"] {background-color: #fab;} |
Elemente mit diesem Attribut und dieser Wertzuweisung |
[Attribut~="Wert"] |
p[class~="foo"] {background-color: #fab;} |
Das Attribut kann mehrere Werte beinhalten, die mit Leerzeichen getrennt aufgeführt werden. Wenn eines der Werte diesem entspricht, wird die Anweisung ausgeführt. Die Reihenfolge ist egal. |
[Attribut|="Wert"] |
p[class|="foo"] {background-color: #fab;} |
Es reicht wenn der Wert diesen Teil enthält und dieser am Anfang steht und am Ende des Wertes ein Minuszeichen steht. |
[Attribut^="Wert"] |
p[class^="foo"] {background-color: #fab;} |
Ein Attribut dessen Wert mit diesen Zeichen beginnt. |
[Attribut$="Wert"] |
p[class$="foo"] {background-color: #fab;} |
Ein Attribut, dessen Wert mit diesen Zeichen endet. Beispielsweise für verschiedene Bilddateitypen, alle Attribute src mit der Endung jpg. siehe Beispiel |
[Attribut*="Wert"] |
p[class*="foo"] {background-color: #fab;} |
Das Sternchen bedeutet die Zeichenfolge muss irgendwo vorkommen. |
Siehe Pseudoklassen bei Selfhtml
Siehe Pseuoelemente bei Selfhtml
Siehe auch Unterschied Pseudoklassen & Pseudoelemente
Siehe die Übersicht Pseudoklassen / Pseudoelemente
Siehe Pseudoklassen w3schools
Pseudoklassen beschreiben Elemente, die nicht vom Document Tree DOM abgeleitetwerden können. Sie ergeben sich aus den Umständen oder werden durch User Interaktion bestimmt wird (a:hover) Ausnahmen sind hier (:first-child, :lang).
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. Außerdem kann man in einer Reihe von Elementen das erste, das soundsovielte oder letzte Element oder alle übernächsten Elemente auswählen.
Setzt man ein Pseudoelement oder Pseudoklasse ohne einen anderen Selektor davor auf, bezieht es sich auf alle Elemente. So als hätte man den Sternselektor davor geschrieben.
:nth-child(1)
das erste Kind von allen Elementen. entspricht:
*:nth-child(1)
Pseudoklassen werden mit einem Doppelpunkt notiert.
:visited
Pseudoelemente werden mit 2 Doppelpunkten notiert.
::selection
:first-child
li:first-child{background-color: #fab;}
Das erste Kindelement eines übergeordneten Elements. In diesem Falle das erste li Element.
: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;}
: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.
Es gibt kein Hover auf Smartphones!
Tabletts und Smartphones übersetzen ein :hover über einem Link direkt in einen Mausklick.
Mit der Pseudoklasse checked kann man überprüfen, ob eine Checkbox, ein Radiobutton oder ein Element einer Auswahlliste Liste aktiviert ist.
Hier wird das Geschwisterlement .info eingeblendet. In dem Beispiel wurde auch ein Geschwister Kombinator eingesetzt.
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.
Weitere Beispiele zum Thema Menüs ein- und ausblenden.
div:lang(en) {color: #fab;}
Hiermit werden Elemente ausgewählt, denen in HTML eine bestimmte Sprache zugewiesen wurde.
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.
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
nth-child Selfhtml Wiki / nth-test
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
Regel | Bedeutung | |
---|---|---|
:nth-child(b) | (3) | selektiert nur das b-te Kindelement. |
:nth-child(n) | (n) | selektiert alle Kindelemente. Das kann man auch mit dem Offsetwert kombinieren. (n+3) wählt alle ab dem dritten aus. |
:nth-child(an+b) | (3n+0) | Das Beispiel wählt jedes dritte. Die 0 ist ein Offsetwert oder Startwert. Umgangsprachlich ausgedrückt selektiert es jedes "a"te Element ab den "b"ten Element. Mathematisch ausgedrückt selektiert es all diejenigen Kindelemente deren „Platznummer“ bei Division durch a den Rest b lässt. |
:nth-child(n+b) | (-n+6) | alle bis zum b-ten / In diesem Beispiel die ersten 6. Mathematisch ausgedrückt 0 + 6. Oder man könnte auch n wählt alle aus, -n wählt alle nicht aus. |
:nth-child(odd) | (odd) | ist identisch zu :nth-child(2n+1) und :nth-child(2n-1) (ungerade Platznummer). |
:nth-child(even) | (even) | ist identisch zu :nth-child(2n) (gerade Platznummer). Diese beiden Selektoren werden auch gerne eingesetzt, um Tabellenreihen einzufärben. Siehe Beispiel |
li:nth-last-child(3) {background-color: #fab;}
Hierbei wird von hinten gezählt.
Pseudo :nth-last-child()
p:nth-of-type(2n) {color: #fab;}
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
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
CSS.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>
Im folgendem Beispiel werden Bereiche ein- und ausgeblendet. Im Beispiel befinden sich die Erklärungen.
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 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
Auch das folgende Beispiel wird in 2 Schritten vorgestellt. Hier wird lediglich ein Modal eingeblendet.
display:table
eingesetzt.Pseudoelemente. Diese sollten mit 2 Doppelpunkten am Ende einer Selektorenkette an ein Element angehängt werden. Ein Pseudoelement erzeugt einen Abschnitt im Elementbaum, 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. Außerdem kann man in einer Reihe von Elementen das erste, das soundsovielte oder letzte Element oder alle übernächsten Elemente auswählen.
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoelement
Es gibt folgende Pseudoelemente.
::first-line
und ::first-letter
p::first-line {Eigeschaft:Wert;}
article::first-letter {Eigeschaft:Wert;}
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.
::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");
td:nth-child(3)::after{content:" EUR";}
weitere Varianten Sprechblasen: mit after
Siehe auch das Beispiel clearfix
Beispiel mit animierten Unterstrich
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.
pre::selection{
background-color: black;
color: white;
}
Weitere Beispiele in diesem Tutorial