Listenpunkte eigene Farbe zuweisen

irgendwer · 14.12.2023

Hallo ,

Wie kann ich in css Listeneinträgen eine eigene Farbe zuweisen.

Ich habe in html eine Liste (so wie dieses Beispiel!)

<ol>
<li>blau</li>
<li>gelb</li>
</ol>

wie kann ich mit css das ansehen zb von blau und gelb zb so gestalten das blau die Farbe blau hat , und gelb die Farbe Gelb?
ich soll keinen inline html code schreiben.

Also nicht !

<ul>
<ul style="color:blue;">1.blau</ul>
<ul style="color

ink;">2.pink</ul>

</ul>

scatello · 14.12.2023

Dein HTML-Code ist kaputt, in dem Versuch hast du ul in ul, wenn du statt dessen li in ul benutzt, funktioniert das auch.

irgendwer · 14.12.2023

<ol class="a">
<li>pink</li>
<li>blau</li>

du meinst so ?

und der css code wäre dann :

ol.a {
list-style-type: decimal;
style="color:blue"
}

wie kann ich jetzt in der liste jedem <li> quasi ne andere Farbe zuweisen ?

scatello · 14.12.2023

Ein Beispiel: https://www.w3schools.com/cssref/tryit.php?filename=trycss3_nth-child

irgendwer · 14.12.2023

Hallo vielen dank für deine Hilfe . Ich komme dem Zeil ein wenig näher.

irgendwer · 14.12.2023

So , ich komme einfach nicht weiter. Ich habe jetzt in codepen folgenden code geschrieben:
<<!DOCTYPE html>
<html lang="de">
<head>
<h1>Farben</h1>
<ol class="a">
<li class="1">blau</li>
<li>pink</li>
</ol>
<h2>Sonnenfarben</h2>
<ul class="b">
<li>rot</li>
<li>orange</li>
<li>gelb</li>

<ul class="c">
<li>3.braun</li>
<li>4.grau</li>
</ul>
<h3>Grüntöne</h3>

<ol class="d">
<li>teal</li>
<li>limegreen</li>
<li>green</li>
</head>
<body>

</body>

die css Datei sieht so aus :
ol.a{
list-style-type: decimal;
li.1 {text-color:red}

}
ul.b {
list-style-type: circle;

}
ul.c {
list-style:none;

}
ol.c {
list-style-type:decimal;
}
ol.d {
list-style-type:upper-roman
}

ich habe jetzt in der html liste eine klasse angegeben:

<li class="1">blau</li>

in der css habe ich dann -->. li.1 {text-color:red}

funktioniert aber nicht !

Was mache ich denn falsch ?

scatello · 14.12.2023

Es ist sehr einfach, einen gültigen Klassennamen oder Selektoren in CSS zu wählen, indem Sie die folgende Regel befolgen.

Ein gültiger Name sollte mit einem Unterstrich (_), einem Bindestrich (-) oder einem Buchstaben (a-z)/(A-Z) beginnen, gefolgt von Zahlen, Bindestrichen, Unterstrichen und Buchstaben.

Er darf nicht mit einer Ziffer beginnen. Der Beginn mit einer Ziffer ist für HTML5 akzeptabel, aber für CSS nicht akzeptabel.

Zwei Bindestriche gefolgt von einer Zahl sind zulässig.

Quelle: https://www.geeksforgeeks.org/which-characters-are-valid-in-css-class-names-selectors/

ich komme einfach nicht weiter

Warum nicht? Hast du dir das Beispiel angesehen? Scheinbar nicht.

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
li:nth-child(1) {
  color: red;
}

li:nth-child(2) {
  color: lightgreen;
}

li:nth-child(3) {
  color: green;
}
li:nth-child(4) {
  color: purple;
}
li:nth-child(5) {
  color: blue;
}
</style>
</head>
<body>

<ul>
  <li>Red</li>
  <li>Lightgreen</li>
  <li>Green</li>
  <li>Purple</li>
  <li>Blue</li>
</ul>

</body>
</html>