0

I want to apply CSS to the ul li elements following a div section. Using CSS selectors, how to I select the li elements that follow a specific div? I thought it would be this but it does not work

div span.survey_one ~ div ul li{
list-style-type:none;
font-size:1.2rem;
}

Here is the HTML:

<div><span class="survey_one">dddddddddddddd</span>
    <br>
</div>
<div>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</div>
Steve Lloyd
  • 773
  • 2
  • 12
  • 33
  • I do not see how :first-child helps here. – Steve Lloyd May 16 '19 at 04:19
  • 2
    The simple answer is, you can't by this tree. As by using `survey_one`, you have to go to the parent and then sibling of that parent....... Unfortunately there is nothing available to get parent from child using only CSS – Kiran Shinde May 16 '19 at 04:24
  • Kenny's answer is the correct one. In my case, i will need to use javascript to accomplish this. Thanks for the confirmation Kenny. – Steve Lloyd May 16 '19 at 04:31

2 Answers2

2

You're using the general sibling combinator

The way it is now the general sibling selector is selecting the sibling of <span class="survey_one">dddddddddddddd</span>, which is only the <br>.

Try setting the general sibling to this instead div ~ div ul li

div ~ div ul li{
list-style-type:none;
font-size:1.2rem;
color: red; //added for illustrative purposes
}
<div><span class="survey_one">dddddddddddddd</span>
    <br>
</div>
<div>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</div>
Joe B.
  • 1,124
  • 7
  • 14
1

I think it's best you place the two div in parent container and select the li like .parent li

Or to achieve your initial aim, use javascript to 1. Select the parent element of the first div using the survey_one class 2. Transverse to child li of the parent node

Either way, you should place the two divs in a parent container

Cradoe
  • 106
  • 1
  • 8