HTML nur auf ein Element beziehen

kidnic · 6. November 2020

Hallo zusammen,

ich verzweifle so langsam ein wenig und hoffe auf Hilfe von euch!

Ich möchte eine Navigation in einer Seite einfügen, welche schon ein vollständiges CSS besitzt. Leider schaffe ich es nicht, dass sich die Codierung nur auf meine Navigation bezieht, sondern zieht auch andere Elemente der Seite in Mitleidenschaft.

Was muss ich hier eingeben, damit es nur auf das eine Element zutrifft?

Ausschnitt:

<html>

<head>

<style<

.nav {

list-style-type: none;

margin: 0;

padding: 0;

background-color: #4f4f51;

li a {

display: block;

color: #fff;

padding: 8px 16px;

text-decoration: none;

}

li a:hover {

background-color: #a7a7a7;

color: black;

}

</style>

</head>

li a & li a:hover sind im ursprünglichen CSS auch schon definiert.. liegt vielleicht daran? kann ich das für das Element irgendwie anders definieren? Stehe total auf dem Schlauch...

Ganz lieben Dank schon mal im Voraus.

basti1012 · 7. November 2020

Wenn du nur li angibst werden alle li Elemente angesprochen.

Sollen aber nur die li Elemente in deiner Navigation geändert werden dann mußt du einen längeren ( pfad ) nehmen

HTML

<body>
   <nav>
      <ul id="navul">
         <li class="liele"></li>
         <li class="liele"></li>
      </ul>
   </nav>
   <main>
      <ul>
         <li></li>
      </ul>
   </main>
</body>

Alles anzeigen

CSS

li{  /* alle li Elemente*/
   color:red;
}
nav ul li{   /* li elemente innerhalb der Navigation */
   color:red;
}
ul li{ /* alle li */
   color:red;
}
main ul li{ */ nur li im main */
   color:red;
}

Alles anzeigen

Du kannst auch mit Klassen und ids arbeiten

CSS

li.liele{   /* li in der Navigation */
    color:red;
}
#navul li{  /* alle lis in der navigation */
    color:red;
}

Zeig doch mal dein html wie du es hast

HTML nur auf ein Element beziehen

Jetzt mitmachen!

Teilen