Soweit haben wir "einfache" Selektoren gesehen, die verwendet werden um Elemente anhand des Element-Types (z.B. span, p, div), oder dessen Attribute auszuwählen.
Dies ist aber nicht immer ausreichend, um alle Fälle in der Alltagsarbeit abzudecken.
+In der HTML Dokumentenstruktur kann es häufig vorkommen, dass Elemente innereinander verschachtelt sind und Kindes-Elemente öfters den gleichen Klassennamen erhalten.
+Mit einer einfachen Selektierung der Klasse kann es deshalb dazu kommen, das Elemente gestyled werden, die man eigentlich "nicht anfassen will".
+Hierfür gibt es die Möglichkeit, Eltern-Elemente mit einer bestimmten Klassen zu definieren und Kinder mit bestimmten Klassen darin modifizieren/selektieren.
+
+ // Style das Element mit der Klasse "inner"
+ // das sich innerhalb eines Elementes mit
+ // der Klasse "zwei befindet"
+ .eins .inner {
+ background-color: #bfc; // Hellgrün
+ }
+
+ .zwei .inner {
+ background-color: #9ff; // Hellrot
+ }
+ Die Reihenfolge ist hierbei wichtig, eine beliebige Tiefe mit mehreren Kindes-Kindern ist auch möglich.
+Es macht keinen Unterschied, ob das Kind-Element direktes Kind, oder verschachteltes Kind ist:
+Wenn eine strengere Bindung notwendig ist, kann man dies mithilfe des "Child Combinator" Selektors tun.
+Der Child-Kombinator restriktiert die Selektion in dem Maß, dass ein Element ein direktes Child-Element zu einem Parent sein muss
+Reduziert nochmals die Problematik, dass es zu ungewollten Selektionen von Elementen kommt
+
+ .parent > .child {
+ background-color: #f99;
+ }
+ Mithilfe des Sibling-Selektors, lassen sich Elemente, die direkt nach einem anderen Element im Dokument erscheinen, selektieren.
+
+ .first + .second {
+ background-color: #f99;
+ }
+ + Die bisher vorgestellten CSS-Selektoren, waren nur ein paar der Verfügbaren Methoden, um HTML-Elemente zu selektieren. +
++ Die folgenden Slides erläutern die weiteren Methoden um komplexere Fälle abzudecken. +
+Media Queries bilden einen Elementaren Bestandteil moderner Webentwicklung
+Sie sorgen dafür, dass Elemente auf einer Website für mehrere "Viewports" angepasst werden.
+Dadurch werden die Webseiten von heute "mobile Friendly". Sie sehen auf jedem Bildschirm gut aus (zumindest so die Theorie)
+Aber was machen Media Queries nun?
+Am ehesten kann man Media Queries wie eine if-Abfrage für bestimmte Medien-Typen und Features funktionieren.
+Wenn Bildschirm nicht breiter ist als 500px, dann "erwäge" folgende Selektoren und Styles...
+ // Wenn Verfügbare Breite kleiner gleich 900 pixel ist...
+ @media (width <= 900px) {
+ // style div's mit Klasse "small-styled"...
+ div.small-styled {
+ background-color: #f99;
+ }
+ }
+ Das ganze geht auch für eine Reihe von weitere Features:
+Dient zur Feststellung, ob das Gerät ein einfaches hovern zulässt.
+Dies ist Normal der Fall, wenn das Gerät einen Mauszeiger besitzt.
+Geräte mit Toucheingabe fallen nicht in diese Kategorie.
+
+ @media (hover: hover) {
+ // Geräte, die ein "präzises" hovern zulassen,
+ // werden von Selektoren erfasst.
+ }
+ @media (hover: none) { ... }
+ Touch-Geräte haben auch ein Gewisses "Hover"-Feature. Das hovern wird dabei ausgelöst wenn das Element angetippt wird und gleichzeitig der Finger vom Element wegbewegt wird.
+Dieses Feature dient als Kommunikations-Schnittstelle zum Betriebssystem.
+Im Betriebssystem kann heutzutage eingestellt werden, ob ein Light-Theme oder Dark-Theme in den Betriebssystem-Fenstern verwendet werden soll.
+Mit prefers-color-scheme kann das abgefragt werden und Styles angewandt werden.
+ @media (prefers-color-scheme: light) {
+ // Betriebssystem-Standard-Einstellung
+ // Definiere Farben für helle Oberflächen (Light-Theme)
+ }
+
+ @media (prefers-color-scheme: dark) {
+ // Definiere Farben für dunkle Oberflächen (Dark-Theme)
+ }
+ Wie vorhin bereits vorgestellt. Es lassen sich Unter- und Obergrenzen für breite und/oder Höhe definieren.
+Es können auch mehrere Abfragen für verschiedene Display-Breiten (auch Viewports genannt) definieren
+Mobile, Tablet, Small-Desktop, Large-Desktop sind "gängige" Benamungen
+
+ @media (width < 600px) {
+ // 599px und kleiner (mobile)
+ }
+ @media (600px =< width < 950px) {
+ // 600px bis 949px (tablet)
+ }
+ @media (950px =< width) {
+ // 950px und breiter (Desktop)
+ }
+ Eine gängige Taktik um Website-Inhalte zu implementieren, ist es "mobile-first" vorzugehen.
+Dabei wird in der Implementierung zuerst die kleinste Viewport-Größe beachtet, sodass die Website auch auf kleinsten Geräten funktioniert.
+Aktuelle Weiterentwicklung im Bereich der Webentwicklung deutet auf "Smallest Size First" hin.
+Bei Smalles-Size-First, wird mit neueren Queries (Container-Queries) die Verfügbare Breite eines Elementes (anstatt der gesamte Viewport) abgefragt.
+Je nachdem wie viel Breite zur Verfügung steht können so Inhalte innerhalb eines Elementes unterschiedlich gestyled werden.
+Besonders für Mobile Geräte interessant (wenn auch ein Computer-Bildschrim in Portrait dargestellt werden kann).
+
+ @media (orientation: portrait) {
+ // Hochkant (z.B. Normal gehaltenes Smartphone)
+ }
+
+ @media (orientation: landscape) {
+ // Querformat (z.B. Computer-Bildschirm; Breiter als Höher)
+ }
+ Die Definition des Screen-Types ist nur noch wichtig, wenn man seine Website als PDF generieren lassen will (bzw. Ausdruckbar machen will)
+
+ @media screen {
+ // Standard-Mäßige Darstellung von Inhalten
+ // Auf einem PC-Bildschirm
+ }
+ @media print {
+ // Spezielle Stylings für Druck-Inhalte (CMD+P oder CTRL+P)
+ }
+ Manchmal ist es auch notwendig, mehrere Queries miteinander zu verknüpfen, man kann so komplexere Szenarien abbilden.
+
+ @media screen and (width <= 500px) {
+ // Kleine Bildschirme
+ }
+
+ @media (500px <= width), screen and (orientation: portrait) {
+ // Kleine Breiten ODER Bildschirme im Hochkant-Modus
+ }
+ Pseudo-Klassen werden dazu verwendet, HTML-Elemente mit einem Bestimmten Zustand zu selektieren.
+Ein paar Beispiele dieser Zustände sind: Erstes Element eines bestimmten Typs, Maus-Hover, und weitere.
+Pseudo-Selektoren zeichnen sich dadurch aus, dass sie mit einem Doppelpunkt (":hover") gekennzeichnet sind.
+first-child & first-letter
+first-child selektiert das erste Vorkommende Kind innerhalb eines Element dar.
first-letter selektiert den ersten Buchstaben innerhalb der Kinder eines Containers.
+ // Selektiere das erste Kind-Element innerhalb von .container
+ .container :first-child {
+ border: 4px solid #E58F65;
+ }
+ .container :first-letter {
+ color: red;
+ }
+ Die Besten Programmiersprachen (nicht sortiert?):
+:first-line
Mithilfe von Firstline, kann die erste Zeile (zum Beispiel in einem Paragraphen) gesondert gestyled werden
+
+ // Selektiere die erste Zeile im "container"
+ .container:first-line {
+ color: deeppink;
+ }
+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora sint, iure magnam, praesentium accusamus, fugit animi laboriosam aut ullam commodi nihil alias! Id provident numquam minus tempora ducimus ad natus. +
+
+ :first-of-type
+
Mit diesem Pseudoselektor lässt sich ein bestimmtes Element innerhalb eines Containers selektieren
+
+ .container.third p:first-of-type {
+ font-weight: bold;
+ color: royalblue;
+ }
+ Erster Paragraph
+Zweiter Paragraph
+Nicht nur das erste Element selektieren: nth-Selektoren
first-child und first-of-type lassen sich auch für Elemente an anderer als erster Stelle definieren:
Es wird aufgefallen sein: :nth-child() sowie die anderen :nth-*() Varianten haben am Ende Runde Klammern, die diesen Selektor so aussehen lassen, als werde eine Funktion (oder ähnlich) aufgerufen.
Innerhalb der Klammer wird Angegeben in welchen Abständen die Elemente selektiert werden.
+Beispiel-"Grid", jede einzelne Box hat die Klasse "child", der Parent-Container hat die Klasse "flex"
+
+ // Selektiere das 2. Element mit der Klasse "child"
+ .child:nth-child(2) {
+ background-color: #E58F65;
+ }
+
+ // Alternative Schreibweise mit "of"-Keyword
+ // (diesmal das 4. Kind)
+ :nth-child(4 of .child) {
+ background-color: #E58F65;
+ }
+ Jetzt sind alle geraden Kind-Elemente "selektiert"
+Aber das geht auch einfacher:
+
+ // Selektiert alle gerad-zahligen Vorkommnisse von "child"
+ :nth-child(even of .child) {
+ background-color: #E58F65
+ }
+
+ // Selektiert alle ungerad-zahligen Vorkommnisse von "child"
+ :nth-child(odd of .child) {
+ background-color: rgb(126, 154, 240);
+ }
+ Nun etwas Mathe
+der nth-Selektor lässt auch eine Formel zu:
An+B, dabei ist n "gedanklich" eine natürliche Zahl
Beispiele:
+:nth-child(2n)
- Selektiert jedes 2. Element (even)
:nth-child(2n + 1)
- Selektiert jedes 2. Element, beginnend ab dem 1. Element (odd)
(n+7)
- Selektiert das 7. und alle darauffolgenden Elemente
(-n+3)
- Selektiert die ersten drei Elemente
before & afterJedes Element hat 2 Pseudo-Elemente die zusätzliches Styling für dieses Element zulassen.
+Diese Pseudeo Elemente befinden sich "vor" und "nach" dem eigentlichen Element und werden mit ::before und ::after selektiert und modifiziert.
+ .before-and-after::before {
+ content: '>>before<<';
+ background-color: rgb(255, 255, 172);
+ }
+
+ .before-and-after::after {
+ content: '>>after<<';
+ background-color: rgb(255, 194, 201);
+ }
+ Beispiel
+Der Text in content wird entsprechend angezeigt, dies ist aber nicht der einzige Use-Case.
Tools wie CSS Arrow Please! nutzen before und after, um z.B. eine "Sprechblase" zu erstellen
+:activeEs gibt paar Pseudo-Klassen die einen Interaktiven Zustand von bestimmten Elementen stylen
+Die erste Pseudo-Klasse dieser Art ist :active. Dieser Zustand wird für button und a Elemente verwendet.
Der "active" Zustand herrscht typischerweise, solange der Nutzer die (Primäre) Maustaste gedrückt hält.
+
+ button {
+ padding: 1rem 2rem;
+ border: none;
+ outline: none;
+ background-color: white;
+ border: 4px solid black;
+ border-radius: 1rem;
+ font-size: xx-large;
+ cursor: pointer;
+ box-shadow: 24px 24px 0 black;
+ transition:
+ box-shadow 333ms ease-in-out,
+ transform 333ms ease-in-out;
+ }
+
+ button:active {
+ box-shadow: 12px 12px 0 black;
+ transform: translateY(4px);
+ }
+ :hoverMit :hover können wir auf den Zustand reagieren, wenn der Nutzer mit dem Mauszeiger über einem Element "schwebt".
Mit dieser Pseudo-Klasse lässt sich sehr schnell ein Interaktives Element für den Nutzer identifizieren.
+
+ .card {
+ border: 4px solid black;
+ max-width: 300px;
+ padding: 2rem;
+ border-radius: 2rem;
+ box-shadow: 6px 6px 10px #0006;
+ transition: box-shadow 150ms ease-in-out;
+ }
+
+ .card:hover {
+ box-shadow: 24px 24px 16px #0006;
+ }
+ :not():not(...) ist eine Pseudoklassen-Funktion. Innerhalb der Klassen kann ein CSS-Selektor beschrieben werden und die Selektion wird dadurch negiert
Nach der Idee "Selektiere alle Elemente die folgendes nicht haben..."
+
+ p:not(.important) {
+ background-color: #282; // Grün
+ color: white;
+ }
+
+ p.important {
+ background-color: #822; // Rot
+ color: white;
+ }
+ Ich bin .important
Ich bin .normal
:where() & :is()Folgendes Szenario
+
+ <ol>
+ <li>Level 1 - Item 1</li>
+ <li><ul>
+ <li>Level 2 - Item 1</li>
+ <li>Level 2 - Item 2</li>
+ <li>
+ <ol>
+ <li>Level 3 - Item 1</li>
+ </ol>
+ </li>
+ </ul></li>
+ </ol>
+ Wir haben also ineinander verschachtelte Listen (mit unterschiedlichen Listen-Typen)
+Nehmen wir nun an, dass es auch sein kann, dass wir nicht sicher sein können ob die "Reihenfolge" der Listentypen immer gleich sein wird
+Wie müssten CSS-Styles aussehen, um alle Fälle abdecken zu können?
+
+ ul,ol {...} // Level 1 Styles
+ ul,ol ul {...} // Level 2 Styles
+ ul,ol ol {...} // Level 2 Styles
+ ul,ol ul ul {...} // Level 3 Styles
+ ul,ol ul ol {...} // Level 3 Styles
+ ul,ol ol ul {...} // Level 3 Styles
+ ul,ol ol ol {...} // Level 3 Styles
+
+ :where(ul, ol) {} // Level 1 Styles
+ :where(ul, ol) :where(ul, ol) {} // Level 2 Styles
+ :where(ul, ol) :where(ul, ol) :where(ul, ol) {} // Level 3 Styles
+ Welche Schlüsse ziehen wir hieraus?
+:where & :is verhalten sich nach außen gleich. Wir können eine Komma-separierte Liste an CSS-Selektoren hinein kippen, wenn einer davon "matched" reicht das aus um die Stylings anzuwenden.
Wo sind dann die Unterschieden zwischen where & is?
where, zählen nicht zur "Spezifität" des selektierten Elementes, is zählt die am besten passende Spezifität.
+
+ <p class="test">Hier steht ein Text!</p>
+
+ p:where(.test) {
+ background-color: black;
+ }
+
+ p {
+ background-color: #002;
+ color: white;
+
+ }
+ Hier steht ein Text!
+
+ p:is(.test) {
+ background-color: white;
+ color: black;
+ }
+
+ p {
+ background-color: #002;
+ color: white;
+ }
+ Hier steht ein Text!
+