CSS Wie Elemente einer Liste (li) nur für eine Klasse ansprechen?

[Bootbachelor]

Hallo!

Was ich gerne hätte: eine ul-Liste, in der der Abstand zwischen einzelnen Listenelementen größer ist als der allgemeine Zeilenabstand. Aber das nur für eine bestimmte Klasse class1!

Das hier funktioniert, für mich unbegreiflicherweise, nicht. Genauer: die padding-bottom-Angabe für die li-Elemente der class1 wird einfach ignoriert.

ul.class1 {
line-height: 1.5;
}

li.class1{
padding-bottom: 100pt;
}

Die Frage ist: warum? Und: wie kann ich den li-Abstand nur für diese Klasse ansprechen?

Viele Grüße
Bootbachelor

 

[pajaa]

Wie sieht denn der html-code dazu aus?
Überschreibungen erforden oft ein !important hinter der css-Definition.

 

[Wo bin ich hier]

Funzt bei mir im Firefox. Vielleicht solltest du noch den dazugehörigen HTML-Code zeigen.

 

[Bootbachelor]

Ach ja:

<ul class="class1">
<li>Erstes Element</li> <li>Zweites Element</li> <li>Drittes Element></li> </ul>

PS: "padding-bottom: 100pt !important;" hat nicht geholfen.

 

[Wo bin ich hier]

Dann musst du es so schreiben:
ul.class1 li{
padding-bottom: 100pt;
}

 

[Bootbachelor]

ul.class1 li{
padding-bottom: 100pt;
}

Du bist ein Crack! Das wars.

Aber wie ist das zu erklären? ul.class1 ist ja ganz normal: Elementselektor.Klassenselektor. Ist li vielleicht kein (eigenes) Element?

 

[Sykehouse]

Du siehst ja in deinem HTML Code, dass die Klasse class1 dem Element ui und nicht li zugewiesen ist.

 

[Bootbachelor]

ui und nicht li

ui?

In meinem Code stand das hier:

li.class1{ ...

 

[Joshinator]

li.class1

Bedeutet alle "li"-Elemente die die Klasse "class1" haben

<ul>
<li class="class1">"li.class1" greift</li>
</ul>

<ul class="class1">
<li>"li.class1" greift nicht, nur das UL hat ja .class1</li>
</ul>

<ul class="class1">
<li class="class1">"li.class1" greift, aber das UL Element war dem CSS hier egal</li>
</ul>

ul.class1 li

Bedeutet alle "li"-Elemente die unter einem "ul"-Element sind das die Klasse "class1" hat.

<ul class="class1">
<li>"ul.class1 li" greift</li>
</ul>

<ul class="class1">
<li class="class1">"ul.class1 li" greift, aber die Klasse auf dem LI ist dem CSS egal gewesen</li>
</ul>


<ul class="class1">
<ul>
<li>ul.class1 li greif hier auch, weil "ul.class1 li" beliebig tief guckt</li>
</ul>
</ul>

Am besten liest du dich nochmal in die CSS-Selectors ein, primär die "combinators and separators".
Wenn die nicht sitzten wirst du alle 5min Probleme haben.

 

[Bootbachelor]

nicht li zugewiesen

alle "li"-Elemente die die Klasse "class1" haben

! In meinem HTML haben die li-Elemente selbst ja gar keine Klassenbezeichnung! Jetzt hab ich verstanden, warum "li.class1..." gar nichts selektiert hat. Und nach dem Leerzeichen kommt das li als Nachfahrenselektor, damit alle li, die dem ul dieser Klasse untergeordnet sind, angesprochen werden. Herr Lehrer, ich weiß was.

Daß diese Dinge sitzen, ist schwierig bei mir, aber ich habe deshalb nicht alle 5 Minuten Probleme damit, weil ich mich schätzungsweise nur alle 5 Jahre damit beschäftige. Das ist dann jeweils wieder Neuland, wohl unvermeidlich.

Vielen Dank euch!

 

[Sykehouse]

?

"ul" war natürlich gemeint 🤦‍♂️