CODEWITHSUNDEEP
htmlcss
historystamp
historystamp

Reputation: 1478

How to reference sibling list items

I building a common css user file for two different web pages. I have unordered lists on two different pages. In the actual html there are lots of unordered lists deeply nested in divs and what have your. The actual number of list items is greater than shown here. I need to format the first set of list items differently than the second set. There is nothing different in the ul coding. There is too much css to wade through for other differences. 

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

The only discernible difference that I have noticed is different data-filter-id fields. I need to reference the span tags in the first list and not the second.

I've written this css to address the first li in the first list: 

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

Is there some way to refer to the sibling li tags in this css? I could code:

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

But is there some shortcut I could code to have to list all the adjacent list items?

This this the correct way to escape the imbedded [] in css?

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

Is this the correct way to include the class on the css for the li tag?

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

Upvotes: 0

Views: 56

Answers (1)

Johannes
Johannes

Reputation: 67778

Use ul:first-of-type > li as a selector for all li items inside the first ul

If that isn't sufficient (you write about different pages), use a class on the according ul and address the child lis of that class like ul.my-class > li

Upvotes: 1

Related Questions