• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kindselektor wählt auch Enkel mit aus

D

der Michel

Neues Mitglied
Hallo liebe Leute,

ich arbeite mich gerade in HTML und CSS ein und stehe vor einem Problem, dass ich selbst nicht schaffe. Hab schon Leute gefragt, aber selbst die wussten nicht woran es liegt.

Also mein Problem. Ich versuche in einen ul-Liste über den Child-Selektor die Kinder li auszuwählen und zu verändern während die ul und ol Liste, die Enkel und Urenkel sind nicht mit ausgewählt werden sollen.
Ich habe das so probiert wie in verschiedenen Quellen in Büchern und im Netz beschrieben. Ich habe sogar Code kopiert und es hat nicht geklappt wie beschrieben.

Die Liste hat folgenden HTML-Code:
HTML: 
<ul>
     <li>Startseite</li>
     <li>Reisen
         <ul>
           <li>Italien</li>
             <ol>
               <li>Rom</li>
               <li>Sizilien</></li>
             </ol>
            <li>Island</li>
           </ul>
          </li>
          <li>Kontakt</li>
</ul>

und folgenden CSS-Code:
ul > li {
color: #58ACFA;
}

alternativ habe ich auch das hier versucht, da die Liste ein Kind vom div="text" ist.

#text ul {
color: #58ACFA;
}

Was jetzt rauskommt sieht aber immer so aus, wie das Foto, dass ich angehängt habe. Und dass, obwohl ich irgendwann übergegangen bin, das Ding einfach stur nach Vorlage abzuschreiben.
Die List habe ich von hierher nachgebaut.
http://www.drweb.de/magazin/css-for-runaways-5-unterschaetzte-selektoren-44651/

Ich hoffe, der Fehler ist nicht allzu dämlich. Ich finde den nämlich zum verrecken nicht.

schönen Gruß
der Michel
 

Anhänge

  • output.png
    output.png
    9,5 KB · Aufrufe: 2
Zuletzt bearbeitet:
Also,

ich habe gerade eine Antwort von jemandem bekommen. Das löst das Problem, aber ich weiss nicht warum.

Damit hats geklappt:
* {
color: black;
}

Obwohl ich der Schrift eigentlich schon zweimal eine Farbe gegeben hatte:

body {
background-color: #272822;
color: black;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 81.25%;
}

und:
#wrapper {
width: 80%;
min-width: 660px;
max-width: 72em;
margin: 10px auto;
}

Warum das jetzt so ist, verstehe ich aber nicht.
Und besonders elegant finde ich das auch nicht, auch wenns klappt.
 
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>

ul li {
color:#f00;
}

ul ul li {
color:#0f0;
}

ul ul ol li {
color:#00f;
}
</style>
</head>
<body>
<ul>
  <li>Startseite</li>
  <li>Reisen
    <ul>
       <li>Italien
         <ol>
            <li>Rom</li>
            <li>Sizilien</></li>
         </ol>
      </li>
     <li>Island</li>
  </ul>
 </li>
  <li>Kontakt</li>
</ul>
</body>
</html>
 
Hallo und danke für die Antwort,

aber genau den Weg wollte ich durch das Ausprobieren von Child-Selektoren ja umgehen.
Der Sinn und Zweck von den Child-Selektoren ist ja das man die ganzen "li" der ersten Ebene
auswählen kann, ohne alles durchzudeklinieren.

Es geht mir darum das spezielle Problem mit dem Child-Selector zu verstehen,
nicht das Problem irgendwie zu umgehen. Trotzdem danke.

Das Ganze wie hier beschrieben:
http://www.drweb.de/magazin/css-for-runaways-5-unterschaetzte-selektoren-44651/
 
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>

nav ul {
margin:0;
padding:0;
list-style:none;
color:#f00;
}
nav li ul:nth-child(1) {
color:#00f;
padding-left:10px;
}

nav li li ul:nth-child(1) {
color:#9aa;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>link 1<ul><li>link1.1<ul><li>link1.1</li><li>link1.1</li></ul></li><li>link1.1</li></ul></li>
<li>link 1</li>
<li>link 1<ul><li>link1.1</li></ul></li>
<li>link 1<ul><li>link1.1</li></ul></li>
</ul>
</nav>
</body>
</html>
So vielleicht.
Übrigens:
Code: 
nav ul {
 margin:0;
 padding:0;
 list-style:none;
 color:#f00;
}

nav li li {
 color:#00f;
 padding-left:10px;
}
ist das selbe
 
Zuletzt bearbeitet:
Hallo,

hier scheint mir schlicht ein Verständnisproblem vorzuliegen.

Es gibt CSS-Anweisungen, die sich nur auf die angegebenen Elemente auswirken (z. B. padding, border, margin) und CSS-Anweisungen, die automatisch auf alle Kindelemente weitervererbt werden (z. B. font-size, color, background-color).

Deine Lösung funktioniert also einwandfrei. Du hast (bislang) bloß nicht gewußt, das sich color-Anweisungen automatisch weitervererben. Durch deine CSS-Anweisung wird also wie gewünscht nur den direkten Kind-Elementen li die Farbe zugewiesen. Aber CSS-gemäß wird diese Anweisung an alle Kinder, Enkel u.s.w. weiter durchgereicht. Diese Automatik wird durch das >-Zeichen also nicht außer Kraft gesetzt.

Wenn du CSS-Anweisungen einträgst, die sich nicht automatisch weitervererben wirst du feststellen, das sie sich wie erwartet nur auf die direkten Kind-Elemente auswirken.

Bei der Anwendung von child-Selektoren muss man sich also immer bewusst sein, ob die CSS-Anweisungen sich nur auf die genannten Elemente auswirken oder immer durchgereicht werden.

Gruss

MrMurphy
 
Hallo und sorry für die späte Rückmeldung.

Danke erstmal für die Antworten.
Mir war eigentlich klar, dass Color sich weitervererbt. Aber hier hab ich das irgendwie ausgeblendet. Scheinbar war mir das dann doch gar nicht so klar.
Und danke für den Link.

Was mir dann aber immer noch nicht klar ist, warum ich das mit der Anweisung über den Generalselektor
doch klappt.
Wie oben beschrieben ist am Anfang der CSS-Datei dann das hier angegeben.

HTML: 
* {
color: black;
}

Im Grunde wird das ja durch meine Anweisung

HTML: 
ul > li {
color: #58ACFA;
}

überschrieben und folglich müsste die Farbe #58ACFA in den Listen weitervererbt werden.

Gruß
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben