Die Selektoren

CSS-Selektoren sind wie Anweisungen, die Sie Ihrer Website geben, um zu sagen, auf welche Teile Ihrer Seite Sie einen Stil anwenden möchten. Hier sind einige Arten von Selektoren und ihre Unterschiede :

Element HTML-Tag

Dies ist der grundlegendste Selektor. Sie wählen ein bestimmtes HTML-Element aus, z. B. <p> für Absätze, <h1> für Überschriften etc. Alles, was Sie auf diesen Selektor anwenden, wirkt sich auf alle entsprechenden Elemente auf Ihrer Seite aus.

Beispiel: 

p {
   color: blue;
}

Klasse .

Sie weisen einem oder mehreren HTML-Elementen eine bestimmte Klasse zu und verwenden diese Klasse dann als Selektor. So können Sie einen Stil auf eine bestimmte Gruppe von Elementen anwenden.

Beispiel: 

<p class="important-text">Dieser Text ist wichtig.</p>.
.important-text {
   font-weight: bold;
}

tag.classe Kombination

Dieser Selektor ist eine Kombination aus zwei Arten von CSS-Selektoren, die zusammen verwendet werden, um eine bestimmte Gruppe von HTML-Elementen gezielt anzusprechen. Eine Klasse wird normalerweise verwendet, um denselben Stil auf mehrere HTML-Elemente anzuwenden. Wenn wir möchten, dass eine Klasse einen noch spezifischeren Stil auf das Tag vom Typ div anwendet, das jedes beliebige HTML-Tag sein könnte, geben wir an, dass sie nur die .container-Klassen nehmen soll, die auf einem div-Tag vorhanden sind.

Beispiel: 

<div class="container">.
    div, das die Klasse `container` enthält.
</div>.

<section class="container">.
   section, die ebenfalls die Klasse "container" enthält.
   Diese wird nicht durch das untenstehende CSS beeinflusst, da wir uns auf dem Tag section befinden.
</section>>.
div.container {
    background-color: gray;
}

Kennung #

Sie weisen einem HTML-Element eine eindeutige Kennung zu und verwenden diese Kennung dann als Selektor. Dadurch wird sichergestellt, dass nur ein Element auf Ihrer Seite diesen bestimmten Stil hat.

Eine ID ist auf der Seite eindeutig, sie kann also nicht einmal im <header> und dann wieder im <footer> vorkommen.

Beispiel: 

<div id="header">Kopfzeile der Website</div>.
#header {
    background-color: gray;
}

Nachkomme, Kind Space

Sie können ein Element auswählen, das ein direktes Kind oder ein Nachkomme eines anderen Elements ist. Beispielsweise können Sie alle Absätze (<p>) innerhalb eines bestimmten <div class="container"> anvisieren.

Beispiel: 

<div class="container">.
    <p>
        Absatz, der innerhalb des div.container enthalten ist.
    </p>
</div>.
.container p {
   margin: 10px;
}

Attribut [attribut]

Sie können Elemente anhand ihrer Attribute auswählen. Beispielsweise können Sie alle Links (<a>) mit einem bestimmten href-Attribut auswählen.

Beispiel: 

a[href="https://www.example.com"] {
   color: green;
}

Universell *

Der Selektor * wird auf alle Elemente auf der Seite angewendet. Er ist nützlich, wenn Sie einen globalen Stil anwenden möchten.

Beispiel: 

* {
   margin: 0;
   padding: 0;
}

Gruppe ,

Sie können mehrere Selektoren gruppieren, um denselben Stil auf sie anzuwenden. Dadurch wird doppelter Code vermieden.

Beispiel: 

h1, h2, h3 {
   font-family: "Arial", sans-serif;
}

Pseudoklasse :status

Mit Pseudoklassen können Sie Elemente in bestimmten Zuständen auswählen, z. B. nicht besuchte Links (:hover, :active) oder Kontrollkästchen (:checked).

Beispiel: 

a:hover {
   text-decoration: underline;
}

Listen der häufigsten Pseudoklassen: :hover, :last-child, :first-child, :only-child, :checked, :focus
. --> siehe mehr auf w3schools

pseudo-Element :element

Mit Pseudoelementen können Sie auf bestimmte Teile eines Elements abzielen, z. B. auf den ersten Absatz (:first-of-type) oder den ersten Buchstaben (:first-letter) eines Textes.

Beispiel: 

p:first-letter {
    font-size: 24px;
}

p:first-of-type {
    Hintergrund: red;
}

Listen der vorhandenen Pseudo-Elemente: :after, :before, :first-letter, :first-line, :marker, :selection
. --> mehr auf w3schools

Angrenzend +

Sie können ein Element auswählen, das direkt an ein anderes Element desselben Typs angrenzt. Zum Beispiel der erste Absatz nach einer Überschrift.

Beispiel: 

h2 + p {
    margin-top: 20px;
}

Direktes Kind >

Wählen Sie mithilfe von > nur Elemente aus, die direkte Kinder eines anderen Elements sind.

Beispiel: 

ul > li {
    list-style-type: square;
}

Geschwister ~

Sie können alle Geschwisterelemente eines bestimmten Typs auswählen, die auf ein bestimmtes Element folgen.

Beispiel:

h2 ~ p {
    font-style: italic;
}

In diesem Beispiel wird für alle Absätze (<p>), die auf eine Überschrift der Ebene 2 (<h2>) folgen, der Schriftstil kursiv gesetzt.

N-tes Element :nth-child()

Sie können ein Geschwisterelement eines bestimmten Typs anhand seiner Position unter den Geschwisterelementen auswählen.

Beispiel:

ul li:nth-child(odd) {
    background-color: blue;
}

ul li:nth-child(even) {
    background-color: yellow;
}

ul li:nth-child(3) {
    background-color: green;
}

In diesem Beispiel:

  • Alle ungeraden
  • -Elementeodd` haben einen blauen Hintergrund.
  • Alle geraden <li>-Elemente even haben einen gelben Hintergrund.
  • Nur das dritte
  • ` in der Liste hat einen grünen Hintergrund.

Erster / Letzter :first / :last

Beispiel:

p:first-child {
    color: red;
}
p:last-child {
    color: blue;
}

Hier:

  • Der erste Absatz <p> wird die Farbe Rot erben.
  • Der letzte Absatz <p> erhält die Textfarbe Blau.

Inhaltsverzeichnis