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">
        

& Der Verschachtelungs Selektor (2023)

siehe auch MDN

Bevor man sich mit diesem Thema beschäftigt sollte Pseudoklassen und / oder Pseudoelemente kennen. Siehe auch das Thema Nachfahren-Selektor

Der Verschatelungsselektor & gibt die Beziehung zwischen übergeordneten und untergeordneten Regeln an. Er setzt die untergeordnete Regel relativ zum übergeordnetem Element. Das kann man besonders gut bei Pseudoklassen und Pseudoelementen einsetzen. Ein Beispiel

button{
    background-color: green;
    &:hover{
        background-color: red;
    }
}

Voriges Beispiel bedeutet das gleiche wie folgendes:

button{
     background-color: green;
}
button:hover{
     background-color: red;
}

Ohne das kaufmännische & ist die verschachtelte CSS Anweisung gleichbedeutetnd wie ein Nachfahren-Selektor.

siehe Beispiel

Anfügen des Verschachtelungs-Selektors

Der & Verschachtelungs-Selektor kann auch angehängt werden. Dadurch wird der Kontext der Regeln umgekehrt. Bezogen auf folgendes Beispiel wäre ohne das kaufmännische & section als verschachteltes Element des div anzusehen. Mit angehängtem kaufmännischen & ist es umgekehrt, das div ist ein Nachfolgeelement von section.

div{
          color:red;
          section &{
          font-weight: bold;
          }
          }
        

Vorige Regel bedeutet das gleiche wie folgende:

          section div{
          font-weight: bold;
          }
          div{
          color:red;
          }

siehe Beispiel

Man kann das & auch mehrfach anhängen.

          div {
          border: 1px solid #000;
          padding: 15px;
          width: max-content;

          section & & {
          background-color: #c8c8a0;
          }
          }

Voriges Beispiel bedeutet das Gleiche wie folgendes.

div {
          border: 1px solid #000;
          padding: 15px;
          width: max-content;
          }

          section div div {
          background-color: #c8c8a0;
          } 

so sieht`s aus

Attribut Selektor

Selektor[Attribut="Wert"] {Eigenschaft: Wert}

Beispiele

          a[rel]{
          background-color: #fab;
          }
          input[type="radio"]{
          width: 1rem;
          }

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

Nachfahren durch Verschachtelung

Anstatt den Nachfahren Kombinator einzusetzen, kann man die Verschachtelung der Elemte auch folgendermaßen definieren. Im folgendem Beispiel wird ein div angesprochen und ein p welches sich in einem div befindet.

          div{color:green;
          p{color:red;
          }
          }

so sieht`s aus

Siehe auch Verknüpfungsselektor.

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

            a:hover{color: red;}
          

            /* 1. Standard-Fokus für alle (optional entfernen/neutralisieren) */

            button:focus {
            outline: none;
            }

            /* 2. Fokus-Stil NUR für Tastatur-Nutzer (Tab-Taste) */

            button:focus-visible {
            outline: 3px solid #ff0055;
            outline-offset: 4px;
            border-radius: 4px;
            }

<div class="input-group">

            <label>Benutzername:</label>

            <input type="text" placeholder="Tippen...">

            </div>

            .input-group {
            padding: 20px;
            border: 1px solid #ccc;
            transition: all 0.3s ease;
            }

            /* Sobald das Input-Feld darin fokussiert wird: */
            .input-group:focus-within {
            background-color: #f0f8ff;
            border-color: #007bff;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }

            .input-group:focus-within label {
            color: #007bff;
            font-weight: bold;
            }
          

            input:disabled {
            background-color: #f5f5f5; /* Hellgrau */
            color: #999; /* Blasse Schrift */
            cursor: not-allowed; /* Zeigt ein Sperrsymbol beim Drüberfahren */
            border: 1px dashed #ccc;
            } 

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

            nav li > a:not(:only-child):after{
            content: " +"; 

            <nav><ul>
            <li class="aktuell>Tiere
            <ul>....</ul>
            </li>
            <li>Impressum</li>
            </ul>
            </nav> 

            nav ul li:not(.aktuell) ul {
            display: none;
            }
          

            /* Wähle h2, h3, h4 innerhalb von .content, aber nicht innerhalb von .sidebar */
            .content :is(h2, h3, h4):not(.sidebar *) {
            color: green;
            }
          

            /* Wähle Artikel, die ein figcaption-Element enthalten */
            article:has(figcaption) {
            border: 1px solid black;
            }
          

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

<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>
          

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
• ::marker

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

siehe auch Details Summary

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.

Bild einfügen

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

Beispiel mit Bildern

Text einfügen

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

Beispiel mit Text

Sonderzeichen einfügen

Man kann zwar ein Sonderzeichen direkt von Symbol.cc kopieren. Es ist jedoch sicherer den Code zu nutzen. Hier gibt es einen Unterschied zwischen HTML und CSS. Nehmen wir das Zeichen ☞ Es hat den Code U + 261E.

• \261E
  CSS
  content: "\261E"
• ☞
  HTML
  <span>&#x261E;</span>

Wenn man ein Zeichen eingefügt hat kann man es ganz normal mit weiteren CSS Eigenschaften versehen. Manchmal liegt es nicht ganz mittig. vertical-align: middle oder ein Pixelwert korrigiert die Abweichgung.

.link-button::after {
  content: "\261E";
  margin-left: 8px;      /* Schafft Platz zwischen Text und Symbol */
  color: #ff6600;        /* Macht die Hand z. B. orange */
  font-size: 1.2rem;     /* Macht das Symbol etwas größer als den Text */
  font-weight: bold;     /* Macht die Linien des Symbols dicker */
  vertical-align: 12px;
}

Wert eines Attributs

Im Beispiel wird der Text des rel-Attributs angehängt. Man kann jedes beliebige Attribut verwenden. Hier bietet sich auch das data-* Attribut an, welches man mit beliebigen Werten versehen kann. siehe hier

a:after{content:attr(rel);}

<a href="#" rel="external">Ein Link </a>

Spielereien

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

Ein Pseudo-Element, um den Platzhaltertext in <input> - oder <textarea> -Feldern gezielt zu stylen.
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;}

Pseudoelement ::marker

siehe auch CSS Listen

Hier mit kann man die Eigenschaften einzelner Listzeichen aber auch die Pfeile von details / summary verändern. Farbe, Schriftgröße etc.

CSS

          li::marker {
          color: red;
          }
        

Details & Summary

siehe HTML / siehe Beispiel

Nehmen wir an du hast ein aufklappbares Details-Element. Im Summary-Element könnte ein Pfeil und der Text: "mehr lesen..." stehen. Wie kann man mit CSS das Ganze gestalten und mit unterschiedlichem Text versehen, wenn es aufgeklappt ist. Die Lösung ist, wie so oft, eine Kombination einiger Selektoren.

HTML

<details>
<summary><summary>
<p>Lorem ipsum...</p>
</details>

Der Text im summary sollte sich ändern, je nach Zustand auf oder zu. Deswegen lassen wir das Element summary in HTML leer. Stattdessen wird der Text "mehr lesen..." und "Schließen" mittels Selektor ::after oder ::before eingefügt. Mittels details[open] können wir den geöffneten Zustand ermitteln.

Die Pfeile werden über den ::marker Selektor eingefügt.

CSS

details summary::marker {
  content: " 🡺 ";
}
details[open] summary::marker {
  content: " 🡻 ";
}
details summary::after {
  content: "mehr dazu...";
}
details[open] summary::after {
  content: "Schließen";
}
summary {
  cursor: pointer;
  font-weight: bold;
  color: #842222;
}

Scrollbar (kein Webstandard)

siehe auch developer.mozilla

Bei Webkit-Browsern können Sie die folgenden Pseudoelemente verwenden, um die Bildlaufleiste des Browsers anzupassen:

• ::-webkit-scrollbar die Bildlaufleiste.
• ::-webkit-scrollbar-button die Schaltflächen auf der Bildlaufleiste (Pfeile zeigen nach oben und unten).
• ::-webkit-scrollbar-thumb der verschiebbare Scroll-Griff.
• ::-webkit-scrollbar-track die Spur (Fortschrittsbalken) der Bildlaufleiste.
• ::-webkit-scrollbar-track-piece Die Spur (Fortschrittsbalken) wird NICHT vom Griff verdeckt.
• ::-webkit-scrollbar-corner die untere Ecke der Bildlaufleiste, wo sich sowohl horizontale als auch vertikale Bildlaufleisten treffen.
• ::-webkit-resizer der verschiebbare Größenänderungsgriff, der in der unteren Ecke einiger Elemente angezeigt wird.
• ::-webkit-scrollbar-button:single-button hiermit lassen sich die Buttons an den Enden der Scrollleisten gestalten
• ::-webkit-scrollbar-button:single-button:vertical:decrement
• ::-webkit-scrollbar-button:single-button:vertical:increment
• ::-webkit-scrollbar-button:single-button:horizontal:decrement
• ::-webkit-scrollbar-button:single-button:horizontal:increment

siehe Beispiel