Stylize element at various levels up

Question

Stylize element at various levels up

Navigation

#1 by (3 votes)
#2 by (3 votes)

3

I would like to know how I can change the background of div # whatever by clicking on a li, as in the example below (using css only)

<div class="whatever"></div>
 <section class="content">
        <article class="personagens">
            <h2>Lista de Pokémons</h2>
            <h2>Lista de Digimons</h2>
            <ul>
                <li>Bulbasaur</li>
                <li>Ivysaur</li>
            </ul>

html css

asked by anonymous 26.10.2016 / 14:32

2 answers

Is there a way to export an app for testing without the apple developer program? How to insert a TAG with a comma or semicolon

score 3 · Answer 1

3

If you want to do purely with css stay like this

#a:hover + #b {
    background: #ccc;
}

<div id="a">Div A</div>
<div id="b">Div B</div>

This is just an ex but you adapt to your li

26.10.2016 / 14:51

score 3 · Answer 2

To do this only with HTML / CSS it is necessary to use a hack with a checkbox.

If you link to the adaptation of this code :

#btnControl {
  display: none;
}
#btnControl:checked + .whatever {
  background: red;
}
.whatever {
  width: 50px;
  height: 50px;
  background: gray;
}

<input type="checkbox" id="btnControl" />
<div class="whatever"></div>

<section class="content">
  <article class="personagens">
    <h2>Lista de Pokémons</h2>
    <h2>Lista de Digimons</h2>
    <ul>
      <li>
        <label class="btn" for="btnControl">Bulbasaur</label>
      </li>
      <li>
        <label class="btn" for="btnControl">Ivysaur</label>
      </li>
    </ul>
  </article>
</section>

Font