CSS nur für dieses eine Element.

[dont ScreaM]

Hallo,
ich benutze den Tag <Header> und "line-height:50px;" mein Problem ist das es auch "line-height" für mein Menü gilt. Wie kann ich es so machen dass es nur für <header> gilt und nicht für alles was im Header ist wie zb <nav> ?

header {
  background: #333;
  color: #ddd;
  height: 50px;
  right: 0;
  top: 0px;
  left: 0px;
  position: fixed;
  padding: 0 15px;
  line-height: 50px;
  text-align: left;
}

 

[Novastar]

header {
  background: #333;
  color: #ddd;
  height: 50px;
  right: 0;
  top: 0px;
  left: 0px;
  position: fixed;
  padding: 0 15px;
  line-height: 50px;
  text-align: left;
}

header > * {
  line-height: normal;
}

"header > *" gilt für jedes Element, welches direkt in einem header-Element ist (aber nicht für tiefer liegende Elemente). Mit line-height: normal; stellst du dann die ursprünglichen Wert wieder ein. Habe es nicht getestet, sag also bescheid, falls es nicht funktioniert. ^^

 

[dont ScreaM]

<header>
    <nav>
      <div>
        <button>Right</button>
        <div>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </nav>
</header>

Und die <a href> haben dieses "line-height".

 

[scrollt]

In CSS vererbt sich jede Anweisung auf die Kinder.

Abgesehen davon zäumst du das Pferd von hinten auf. Du solltest dir erstmal die nötigen Grundkenntnisse anlesen oder einen online-Kurs oder so machen. Das macht es dann auch viel weniger frustrierend wenn man etwas nicht versteht.