Verweis auf Geschwisterlistenelemente

Question

Ich erstelle eine gemeinsame css-Benutzerdatei für zwei verschiedene Webseiten. Ich habe Listen auf zwei verschiedenen Seiten ungeordnet. In der tatsächlichen HTML gibt es viele ungeordnete Listen tief verschachtelt in divs und was haben Sie. Die tatsächliche Anzahl der Listenelemente ist größer als hier gezeigt. Ich muss den ersten Satz von Listenelementen anders als den zweiten Satz formatieren. Es gibt nichts anderes in der ul-Codierung. Es gibt zu viel CSS für andere Unterschiede.

<-- list in first page --> 
<ul class="our-list"> 
<li class="group item" data-filter-id="draft">a little bit of <span>text</span></li> 
<li class="group item" data-filter-id="contentstatus[published]">other <span>text</span></li> 
<li class="group item" data-filter-id="participated">last of the <span>text</span></li> 
</ul> 

<-- list in second page --> 
<ul class="our-list"> 
<li class="group item" data-filter-id="One">a little <span>text</span></li> 
<li class="group item" data-filter-id="Two">the <span>text</span></li> 
<li class="group item" data-filter-id="Three">last <span>text</span></li> 
</ul> 

Der einzige erkennbare Unterschied, den ich bemerkt habe, ist unterschiedliche Daten-Filter-ID-Felder. Ich muss auf die Span-Tags in der ersten Liste und nicht auf die zweite verweisen.

Ich habe diese CSS geschrieben, um die erste li in der ersten Liste Adresse:

li[data-filter-id="draft"] span { 
     background-color: yellow !important; 
     } 

Gibt es irgendeine Art und Weise an die Geschwister li-Tags in diesem CSS zu verweisen? Ich konnte Code:

li[data-filter-id="draft"] span, 
li[data-filter-id="contentstatus\[published\]"] span, 
li[data-filter-id="participated"] span, { 
     background-color: yellow !important; 
     } 

Aber gibt es einige Abkürzung I-Code könnte, um alle benachbarten Listenelemente zur Liste zu haben?

Dies ist der richtige Weg, um die eingebetteten [] in CSS zu entkommen?

li[data-filter-id="contentstatus\[published\]"] span, 

Ist dies der richtige Weg, um die Klasse für das li-Tag in die CSS aufzunehmen?

li.group.item[data-filter-id="draft"] span, 

Answer 1

Verwenden ul:first-of-type > li als Selektor für alle li Elemente innerhalb der ersten ul

Wenn das nicht ausreicht (schreiben Sie über verschiedene Seiten), eine Klasse auf der nach ul verwenden und das Kind ansprechen li s der Klasse wie ul.my-class > li