2

Using a CMS that generates the following:

<ul class="list-unstyled">
 <li>content 1</li>
 <li>content 2</li>
</ul>
<ul class="list-unstyled">
 <li>
  <span>content 3</span>
 </li>
 <li>
  <h2>content 4</h2>
 </li>
</ul>

I would like to css select "content 4". There is many <ul> tags with class "list-unstyled". Is there a way to select .list-unstyled > li > h2 where the li have a sibling li > span

This is nessesary so that I dont select more than just content 4. There is a possibility that there is a .list-unstyled > li > h2 in another place but without the sibling li > span

Hope I made myself clear

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Lïnus Wennergren
  • 31
  • 3

2 Answers2

5

Is there a way to select .list-unstyled > li > h2 where the li have a sibling li > span

No, since you can't express a li that has a span child in a selector for the purposes of the sibling relationship. See Is there a CSS parent selector?

See if you can alter the output of your CMS somehow to generate the necessary classes for your elements.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

you mean something like

ul > li + li > h2{color:green}
<ul class="list-unstyled">
 <li>content 1</li>
 <li>content 2</li>
</ul>
<ul class="list-unstyled">
 <li>
  <span>content 3</span>
 </li>
 <li>
  <h2>content 4</h2>
 </li>
</ul>

Basically CSS can't look upwards.

You may want to look into javascript and dom element properties for a more customized approach based on conditional testing; but maybe it's easier to change markup:)

maioman
  • 18,154
  • 4
  • 36
  • 42