Bestimmte Listenelement mit CSS adressieren

[Snooty]

Hio,

ich habe eine Liste mit einigen lis ohne und einigen lis mit Klasse:

<ul>
  <li>..</li>
  <li class="has-children">..</li>
  <li>..</li>
  <li class="has-children">..</li>
  <li>..</li>
  <li>..</li>
</ul>

Kann ich nur mittels CSS das zweite li, dass eine Klasse hat, adressieren, damit ich dort einen bestimmten Style zuordnen kann?

Also sowas wie li.has-cildren:nth-of-type(2) o.ä.

 

[Yuuri]

Nein geht nicht. nth-of-type greift übrigens nur auf Elemente, nicht auf Klassen.

 

[Eagle-PsyX-]

Nein, das geht nicht.
Nicht mit Standardkoformationen, mit JavScript könntest die zählen und den entsprechend eigenen Klassen hinzufügen bzw. Werte zur style-Attribute hinzufügen.

Du kannst aber Klassen kombinieren

<ul>
    <li>..</li>
    <li class="has-children first">..</li>
    <li>..</li>
    <li class="has-children second">..</li>
    <li>..</li>
    <li>..</li>
</ul>

.has-children {
   /* Allgemein */
}

.first {
   /* nur erstes */
}

.second {
   /* nur zweites */
}

 

[Snooty]

Jo, danke. So hab ich's im Moment. Dachte, es geht noch eleganter

 

[TheLastHotfix]

Als kleiner Denkanstoss: https://css-tricks.com/css-variables-with-php/ damit sollte sich eigentlich alles Erdenkliche und dynamisch umsetzen lassen.

 

[Yuuri]

Der Artikel ist von 2009. Mittlerweile gibts dafür SASS bzw. "bald" auch Variablen in CSS (siehe letzter Chrome Release).