a:visited - wenn ein Link schon einmal geklickt wurde
a:hover - wenn man mit der Maus drüber fährt
a:focus - wenn man mit Tastatur über die Seite tabt
a:active - wenn gerade geklickt oder getoucht wird
Pseudo-Klassen für Links geben den Besuchern wichtige Rückmeldungen beim Navigieren
durch eine Seite.
.item::before | wird vor dem Element eingefügt
.item::after | wird nach dem Element eingefügt
.item::selection | bestimmt die Farbe von ausgewählten Elementen
.item::backdrop | liegt zwischen einer Dialogbox und den anderen Elementen
.item::marker | erzeugt ein formatierbares Markierungselement
.item::placeholder | bearbeitet die Placeholder
Mobile Displays von 360×640 bis 414×896
Tablet-Anzeigen im Bereich von 601×962 bis 1280×800
Desktop-Displays im Bereich von 1024×768 bis 1920×1080
@media-Regeln legen je nach Höhe, Breite oder Orientierung (Portrait oder
Landscape) des
Viewports unterschiedliche CSS-Eigenschaften für Gerätetpyen fest.
@font-face {
font-family:'Roboto';
font-style: normal;
font-weight: 400;
src:
local('Roboto'), | Zuerst nachsehen, ob die
Schrift...
local('Roboto-Regular'), | ...beim Besucher schon
installiert ist.
url(fonts/roboto-v18-latin-regular.woff2)
format('woff2'); | Wenn nicht,
wird die Schrift geladen.
}
Fonts NICHT über Google einbinden, sondern Herunterladen und über den
eigenen Webserver einbinden.
Damit wird automatisch erkannt ob der Nutzer in den Betriebssystemeinstellungen ein
dunkles Farbschema (Darkmode) ausgewählt hat, demzufolge wird auch die Website mit den
angegeben Werten angezeigt.
@media (prefers-color-scheme: dark) {
/* dunkles Farbschema für die Nacht */
body {color: white; background: black;}
}
@media (prefers-color-scheme: light) {
/* helles Farbschema für den Tag */
body {color: black; background: white;}
}
@media (prefers-reduced-motion: reduce) { } || weniger Bewegung
@media (prefers-reduced-motion: no-preference) { } || keine Präferenz
Wenn der User sich dafür Entscheidet, weniger Animationen sehen zu wollen, kann er das
im Betriebssystem einstellen.
Wenn es umfangreiches CSS für Animationen gibt, kann es sinnvoll sein, dieses in ein
separates Stylesheet auszulagern. Wenn User keine Animationen sehen wollen, dann wird
diese Datei gar nicht erst geladen.
<link rel="stylesheet" href="animations.css"
media="(prefers-reduced-motion: no-preference)">
:where() | selektiert ebenfalls alle Elemente einer Liste, allerdings mit
einer Spezifität von 0, während :is() die Spezifität oder Genauigkeit
des spezifischsten Selektors annimmt. Wenn also einer der Selektoren der Liste nicht
zutrifft, treten die Eigenschaften der Liste nicht in Kraft.
Mit der Pseudoklasse :focus-visible können Elemente gestylt werden, die mit der Tastatur
angesteuert wurden. Im Unterschied zu :focus-visible, steht :focus für Elemente, die mit
einem beliebigen Eingabegerät fokussiert wurden. Das kann ebenfalls die Tastatur sein,
aber auch ein Cursor oder eine Touch-Eingabe.
Die CSS-Funktion nth-child(n) erreicht jedes n-te Kind eines übergeordneten
Eltern-Elements, wobei n eine Zahl, ein Schlüsselword odd oder even (ungerade / gerade)
oder eine Formel wie an + b sein kann. nth-of-type(n) wirkt hingegen nur bei
Elementen
eines Typs.
Es gibt dann noch dazugehörig:
:first-child; :last-child; :only-child;
:first-of-type; :last-of-type; :only-of-type;
mediaevent/css/selektor-pseudo-klassen
Attribute Selektoren
<a href="http://" target="_blank"></a>
a[target] || wählt alle a mit dem Attribute target
<a href="http://" target="_blank"></a>
a[target="_blank"] || wählt alle a mit dem Attribute target und dem Wert
_blank
<img src="klematis.jpg" title="klematis flower"
[title~="flower"] || wählt alle Elemente mit einem title-Attribut aus, das
eine durch Leerzeichen getrennte Liste von Wörtern enthält, von denen eines
"flower" ist.
<p class="top-text">Hello world!</p>
[class|="top"] || Der Wert muss ein ganzes Wort sein, entweder
allein, wie class="top", oder gefolgt von einem Bindestrich ( - ), wie
class="top-text".
<p class="top-text">Hello world!</p>
[class^="top"] || wählt alle Elemente mit einem Wert des Attributs class
aus, der mit "top" beginnt. Der Wert muss nicht ein ganzes Wort sein
wie class="topcontent"!
class="my_test"; class="my-test"; class="mytest"
[class$="test"] || wählt alle Elemente aus, deren Wert des Attributs class
mit "test" endet. Der Wert muss nicht ein ganzes Wort sein!
class="my_test"; class="my-test"; class="mytest"
[class*="te"] || wählt alle Elemente aus, deren Klassenattribut den Wert
"te" enthält. Der Wert muss nicht ein ganzes Wort sein!
input[type=radio] || man spricht alle input Radios an aber nicht die
Checkboxen
ol[class] || alle ol wählen die eine klasse habe
ol[role="list"] || alle ol wählen mit dieser role
a[href^="https"] || alle links wählen die mit https beginnen
a[href$=".pdf"] || alle links wählen die mit .pdf enden
[id*="tab"] || alle ID ansprechen die den Inhalt "tab" enthalten
img[src*=".png" i]:not([src*="example.png" i]) || alle Bilder auswählen
außer das Eine (mit dem i wird die Groß- Kleinschreibung ignoriert)