Schattierung & Linie bei Navigation / Header anders bei einigen Unterseite

[marcelgerard]

Hi Leute,

kurze Frage - ich habe eine Navigation in einem einfachen Header gebaut und der Header hat z.B auf der Startseite eine leichte Schattierung. Das ist auch so gewollt. aber auf einigen Unterseiten sieht eine normale Linie einfach besser aus, daher würde ich gerne das bei jeder Unterseite unterschiedlich machen. Meine Frage zu ist, ob es da einen Trick gibt ohne das man die Navigation / Header ein zweites mal in eine include Datei setzen muss oder führt daran kein Weg vorbei?

LG Marcel

 

[Aaron3219]

Ein Lösungsansatz wäre, sich die CSS Specificity zu nutze zu machen. Sprich:
In jeder deiner Unterseiten, die anders sein sollen, passt du dein CSS (z.B. per style-tag im header) so an, dass es das eigentliche CSS überschreibt.

https://www.w3schools.com/css/css_specificity.asp

Du sagst also im Haupt-CSS-File:

ul > li {
  //Was auch immer
}

und im File dann halt:

.header-shadow {
   //Kein Shadow
}

Kurz gesagt: Überschreibe einfach dein CSS auf der Unterseite.

Edit:
Nur kurz zu CSS Specificity: Im Prinzip sagt es aus, dass die spezifischeren CSS-Attribute den unspezifischeren übergeordnet sind.

<style>
   .headline {
       background: red;
   }

   h1 {
       background: black;
   }
</style>

<h1 class="headline">
    Der Hintergrund wird rot sein.
</h1>

<style>
div li {
  background: red;
}

div > ul > li {
  background: yellow;
}

li {
  background: black;
}
</style>

<div>
  <ul>
    <li>Hintergrund wird gelb sein.</li>
  </ul>
</div>