CSS Selektoren

Arten von Selektoren:

Typselektor: tagName

Name eines Tags ^{ⓘder Universalselektor * selektiert alle Elemente↩}
selektiert alle Elemente mit diesem Tag

HTML<p>Test</p>
<a href="https://www.hs-furtwangen.de"> HFU Link</a>
<p><a href="https://www.hs-furtwangen.de"> HFU Link</a></p>

CSSp {
  background: lightgreen;
  color: white;
}

ID-Selektor: #idWert

Wert des id Attributs eines Elements
vorangestelltes Hash
selektiert genau das Element mit der angegebenen ID
Hinweis: IDs sollten immer einmalig sein in einer HTML Seite

HTML<p id="test1">Test</p>
<p id="test2">Test2</p>

CSS#test2 {
  background: lightgreen;
  color: white;
}

Klassenselektor: .klassenName

Wert des class Attributs von Elementen
vorangestellter Punkt
selektiert alle Elemente mit diesem Klassennamen
Elemente können mehrere Klassennamen haben (mit Leerzeichen getrennt: class="name1 name2 name3")
grundlegendes Styling meist über Klassennamen ^{ⓘEs gibt css Frameworks mit einer Vielzahl vordefinierter Stylings für Klassen, die dann den HTML Elementen hinzugefügt werden können (z. B. tailwindcss).↩}

HTML<p class="test">Test1</p>
<p class="andere">Test2</p>
<p class="hi">Test3</p>
<p class="test hi">Test4</p>
<p>Test5</p>
<a class="test" href="https://www.hs-furtwangen.de"> HFU Link</a>

CSS.test {
  background: yellow;
}
.hi {
  color: red;
}

Attributselektoren: [attributName]

Name des Attributs von Elementen
umschlossen von eckigen Klammern
selektiert alle Elemente mit diesem Attribut
Hinweis: kann weiter spezifiziert werden über die Angabe eines Wertes: [attributName = wert] ^{ⓘTeilübereinstimmungen mit dem Wert sind ebenfalls möglich: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/einfacher_Selektor#Attributselektor↩}

HTML<p>Test</p>
<a href="https://www.hs-furtwangen.de"> HFU Link</a>
<p><a href="https://www.hs-furtwangen.de"> HFU Link</a></p>

CSS[href] {
  background: lightgreen;
  color: white;
}