listen -> <li> von nur <ol> ansprechen

[mook]

Hallo,

ich moechte mit CSS nur die <li> von <ol> ansprechen, aber
nicht die von <ul>

Wie kann ich nur diese <li> Elemente von <ol> definieren?

so?

ol.li{
 css defintionen;
}

[Jeena Paradies]

Hallo,

ol.li{
css defintionen;
}

Fast, ändere den Punkt in ein Leerzeichen:

ol li { /* deine CSS Definitionen */ }

Ein Punkt steht für eine Klasse, die du ja hier gar nicht hast. Das was du hast wäre <ol class="li">

Grüße
Jeena Paradies

[mook]

Ah, ok. Danke...
Aber ich habe immer noch das Problem, dass auch
die li von ul mit angesprochen werden.

also
ol li{
css def;
}
bewirkt auch auf
li von ul

wie kann ich explizit auf nur li von ol ansprechen....?

Hallo,

ol.li{
css defintionen;
}

Fast, ändere den Punkt in ein Leerzeichen:

ol li { /* deine CSS Definitionen */ }

Ein Punkt steht für eine Klasse, die du ja hier gar nicht hast. Das was du hast wäre <ol class="li">

Grüße
Jeena Paradies

[Struppi]

Aber ich habe immer noch das Problem, dass auch
die li von ul mit angesprochen werden.

Bist du sicher?

Struppi.

[mook]

Aber ich habe immer noch das Problem, dass auch
die li von ul mit angesprochen werden.

Bist du sicher?

Ja,

also, ich habe
ol li{
margin-bottom: 30px;
}

und

extra noch

ul li{
margin-bottom: 0px;
}

eingegeben.
Wobei ul li unter ol verschachtelt ist.
also so:

<ol>
 <li>blabla</li>
  <ul>
   <li> jajaja</li>
  </ul>
 <li>blabla2</li>
</ol>

[Struppi]

Ja,

also, ich habe
ol li{
margin-bottom: 30px;
}

und

extra noch

ul li{
margin-bottom: 0px;
}

eingegeben.
Wobei ul li unter ol verschachtelt ist.

s. dem Posting von Sven.

mit ol li sprichst du ALLE li Elmente unterhalb von ol an auch die, die in einer anderen Liste stecken.

Struppi.

[Nargaff]

Ich glaube die Lösung findet sich in der Antwort von Sven Rautenberg.
http://forum.de.selfhtml.org/?t=122343&m=786789

[Struppi]

Wie kann ich nur diese <li> Elemente von <ol> definieren?

so?

ol.li{
css defintionen;
}

nein, du hast ja keine Klasse .li

so
ol li

Struppi.

[Sven Rautenberg]

Moin!

ich moechte mit CSS nur die <li> von <ol> ansprechen, aber
nicht die von <ul>

Dir wurde bisher als Lösung genannt:

  
ol li { }  

Das spricht alle <li> an, die sich in beliebiger Schachteltiefe innerhalb eines <ol> befinden. Allerdings spricht es AUCH die <li> an, die sich innerhalb eines <ol> in einem <li> in einem <UL> befinden, also sowas:

  
<ol>  
  <li>  
    <ul>  
      <li>obiges CSS gilt auch hier</li>  
    </ul>  
  </li>  
</ol>  

Wenn du dagegen wirklich nur die direkten Kindelemente von <ol> ansprechen willst, verwende:

  
ol > li { }  

Da ist allerdings das Problem, dass der IE 6 dies noch nicht erkennt.

Es kann also notwendig werden, stattdessen eine Gegenformatierung einzubauen:

  
ul li { }  

Das wiederum spricht natürlich auch <li> an, die umgekehrt zu oben, in <ol> stecken, die wiederum innerhalb von <ul> liegen.

Da beide Selektoren die gleiche Spezifität haben, gilt derjenige, der in deinem CSS zuletzt geschrieben wurde, für solche Fälle. Und dem kannst du (zumindest im IE 6) auch nicht entgehen.

Hilfreiche Links dazu:
Spezielle Selektoren in CSS
Spezifität von Selektoren - was wirkt wann?

- Sven Rautenberg

[mook]

danke fuer die ausfuehrliche erklaerung.
schade, dass das noch so seine schwachstellen hat...

[wahsaga]

hi,

Das wiederum spricht natürlich auch <li> an, die umgekehrt zu oben, in <ol> stecken, die wiederum innerhalb von <ul> liegen.

Da beide Selektoren die gleiche Spezifität haben, gilt derjenige, der in deinem CSS zuletzt geschrieben wurde, für solche Fälle. Und dem kannst du (zumindest im IE 6) auch nicht entgehen.

Aber du kannst ja in so einem Falle
ol li { /*Formatierung*/ }
und
ol li ul li { /*Gegenformatierung*/ }
nutzen.

Hier hat der zweite Selektor für die LI in UL in LI in OL die höhere Spezifität, egal ob er vor oder nach dem anderen kommt.

gruß,
wahsaga

[Ashura]

Hallo wahsaga.

ol li ul li { /*Gegenformatierung*/ }

Wobei man hier getrost auf das erste li verzichten kann, schließlich muss sich das ul-Element zwangsläufig innerhalb eines li-Elementes befinden.

Einen schönen Donnerstag noch.

Gruß, Ashura

[wahsaga]

hi,

ol li ul li { /*Gegenformatierung*/ }

Wobei man hier getrost auf das erste li verzichten kann, schließlich muss sich das ul-Element zwangsläufig innerhalb eines li-Elementes befinden.

Man kann auf so einiges verzichten - z.b. auch auf das UL zwischen den beiden LI (sofern kein OL in "zweiter Ebene" im Dokument vorkommt, für die die Regel nicht gelten soll).

Es gibt oftmals mehrere Wege, Element zu selektieren - der Nachvollziehbarkeit für CSS-Einsteiger halber habe ich hier aber eine etwas "qualifiziertere" Version als Beispiel gebracht.

gruß,
wahsaga

[Rainer]

Hallo,

so geht es aber.

<html>
<head>
<style type="text/css">
li#ul{
margin-bottom: 0px;
}
li#ol{
margin-bottom: 30px;
}
</style>
</head>

<body>
<ol>
 <li id="ol">blabla</li>
  <ul>
   <li id="ul"> jajaja</li>
  </ul>
 <li id="ol">blabla2</li>
</ol>
</body>
</html>

Gruss Rainer

[Sven Rautenberg]

Moin!

so geht es aber.

Schwachsinnslösung. Insbesondere, dafür eine ID einzusetzen, denn eine ID darf im Gesamten Dokument nur ein einziges Mal vorkommen. Wenn, dann wäre eine Klasse angemessener.

Aber sie ist [http://forum.de.selfhtml.org/my/?t=122343&m=786813@title=ja gar nicht notwendig]!

- Sven Rautenberg