兄弟リストの項目を参照する方法

Question

2つの異なるWebページに共通のCSSファイルを作成します。私は2つの異なるページにリストを並べ替えています。実際のHTMLでは、divに深くネストされた順序付けられていないリストがたくさんあります。リスト項目の実際の数は、ここに示されている数よりも多いです。私はリスト項目の最初のセットを2番目のセットとは異なってフォーマットする必要があります。 ulコーディングでは何も変わりません。他の違いのために歩き回るにはあまりにも多くのCSSがあります。

<-- 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> 

私が気づいた唯一の違いは、データフィルタIDフィールドが異なることです。最初のリストでspanタグを参照する必要があります。

私は、最初のリストの最初のリーに対処するために、このCSSを書いた：

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

は、このCSSの兄弟のliタグを参照するためにいくつかの方法はありますか？

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

をしかし、私は、すべての隣接リスト項目をリストする必要があるために、コードができ、いくつかのショートカットがあります： 私は、コードだろうか？

これはcssの埋め込み[]をエスケープする正しい方法ですか？

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

これは、liタグのCSSにクラスを含める正しい方法ですか？

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

Answer 1

最初ul

内のすべてのliのアイテムのセレクタとして使用ul:first-of-type > liそれは（あなたが異なるページについて書く）、応じul上のクラスを使用して子を解決するに十分でない場合liそのクラスのようにul.my-class > li