mehrere css Dateien mit gleichen "fürwen" Namen, die dann alles kaputt machen
bearbeitet von Rolf BHallo brainstuff,
dein "FÜRWEN" heißt auf CSSisch "Selektor".
Selektoren können durchaus selektiv sein (Pun intended 😜)
~~~css
p {
background-color: red;
}
~~~
pinselt jedes p Element im Dokument rot an.
Fügst Du
~~~
header p {
background-color: pink;
}
~~~
hinzu, bekommst Du Augenkrebs, weil die p Element im Header nun pink als Hintergrundfarbe gaben.
Schlüsselbegriff ist hier die Spezifität. Selektoren können IDs (mit dem Rautenzeichen, #foo selektiert das Element mit id="foo") angeben, oder Klassen (der Punkt, .bar selektiert alle Elemente mit "bar" in der Klassenliste), oder einfach nur Elemente. Siehe oben. Hinzu kommen Attributselektoren (input[type=text] selektiert alle text-Inputs).
Jeder Selektionsart hat ein bestimmtes Gewicht ([guckst du hier](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#Spezifit.C3.A4t)).
Ein ID Selektor ist Kategorie A und zieht mehr als ein Klassenselektor (Kategorie B). Ein Klassenselektor mehr als ein Elementselektor (Kategorie C). Und wenn beide in einer Kategorie sind, wird gezählt. Zwei Klassenselektoren sind spezifischer als einer.
Das kannst Du ausnutzen. Wenn deine Einbauten alle im Header-Element stecken, gib dem Header eine ID:
~~~html
<header id="theHeader">
...
</header>
~~~
und deine Selektoren lässt Du nun alle mit #header beginnen:
~~~css
#header dings {...} /* alle dings-Elemente in #header */
#header .bums {...} /* alle Elemente mit Klasse bums in #header */
~~~
Die Leerstelle zwischen `#header` und `dings` steht nicht zum Spaß da. Sie hat eine spezielle Bedeutung in CSS, sie kombiniert zwei Selektoren miteinander. Und zwar durch eine "Ist Nachfahre von" Beziehung. Der Selektor `#header dings` findet alle dings Elemente, die im DOM Nachfahre des Elements mit id="header" sind (wenn Du fragst, was ein DOM ist und was das mit Eltern, Kindern und Nachfahren zu tun hat, hm. Ich finde keinen "von 0 auf 100" Artikel dazu im Wiki, aber [schau mal hier](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Was_ist_das_DOM). Aus deiner Schachtelung von HTML Elementen wird eine Baumstruktur, und was im Baum weiter unten hängt (ja, ich weiß, es ist pervers dass Informatiker-Bäume ihre Wurzeln oben haben - isNuMalSo) sind die Kinder und Kindeskinder der Verzweigungspunkte, wo sie dran hängen.
*räusper* zurück zum Thema - du musst dann zwar immer noch alle betroffenen CSS Selektoren für den Baustein anpassen, indem Du den ID Selektor davor pinnst, aber dafür bist Du im HTML relativ schnell fertig.
_Rolf_
--
sumpsi - posui - obstruxi