mehrere unterschiedliche Listen in HTML und CSS

TSP · 01.04.2024

Hallo Zusammen,
ich bin ganz neu und bringe mir gerade mit Hilfe verschiedener Webseiten und Videos das erstellen von Webseiten mit HTML, CSS und ein bisschen JS bei.

nun möchte ich eine Website erstellen und habe dort mehrere Listen (ul). Wenn ich diese nun mit CSS aufhübschen möchte, bearbeite ich jedoch immer beide Listen.
Wie kann ich in CSS einzeln auf die Listen zugreifen und unabhängig bearbeiten.

MfG Tom

Sempervivum · 01.04.2024

Das ist recht einfach: Gib den Listen, die Du einzeln ansprechen möchtest, jeweils eine Klasse, dann kannst Du sie so ansprechen:

Code:

ul.die-klasse {
    /* die Style-Angaben */
}

scatello · 01.04.2024

Kleines Beispiel:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
ul.list1 li {
  background-color: red;
  color: white;
}
ul.list2 li {
  background-color: green;
  color: yellow;
}
</style>
</head>
<body>
<ul class="list1">
  <li>Eintrag 1</li>
  <li>Eintrag 2</li>
  <li>Eintrag 3</li>
</ul>
<ul class="list2">
  <li>Eintrag 1</li>
  <li>Eintrag 2</li>
  <li>Eintrag 3</li>
</ul>
</body>
</html>

TSP · 01.04.2024

Super, vielen Dank für die schnelle Rückmeldung.