Изменить контент тега при определенных условиях /checked //дерево css

Question

какова последовательность этих обращений

/*див, затем еще див и на том же уровне список (который меняет дисплей на блок если,,,) 
потом плюс див див див, который ховер (справа условия?)*/

.div.demo-list-hide div ul.hide-list+div.list-item div div.icon:hover {
  display: block;
}

.hide-list {
  display: none;
}

.icon:hover {
  background-color: green;
}

<div class="demo-list-hide">
  <div class="list-item">
    <div class="header-list-items">
      текст и подсписок
    </div>
    <div class="icon">
      иконка
    </div>
  </div>
  <ul class="hide-list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

Как нужно обращаться к элементам при помощи определенных условий, "если кнопка нажата - контент меняется"

.list div.under-list-visible ul {
  display: none;
}

.list div.under-list-visible>input:checked+label+ul {
  display: block;
  margin-left: 2em;
}

ul {
  list-style: none;
}

.span-under-list2 {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}


/* тут я пытаюсь обратиться к стрелке, чтобы изменить её направление, 
мне надо будет её повернуть, чтобы она смотрела вниз, 
в качестве теста я просто меняю ее цвет, 
но видимо порядок обращения к элементам нарушен, не понимаю как это работает */

.list div.under-list-visible>input:checked+label+ul+.span-under-list2 {
  border-right: 0.2em solid red;
  border-top: 0.2em solid red;
}

<ul class="list">
  <li>
    <div class="under-list-visible">
      <input type="checkbox" id="under-list2" style="display:none;" />

      <label for="under-list2">
    <span class="span-under-list2"></span>
     1 (подсписок)</label>

      <ul class="hide-list">
        <li>а</li>
        <li>б</li>
        <li>в</li>
      </ul>
    </div>
  </li>
</ul>

Answer 1

Селекторы! Срочно учить! Я про самый базовый селектор, в виде пробела (комбинатор потомков) )) Ты выбрал label, дальше пробелом выбираем span. Верстка мудреная, это можно сделать чище по коду, безо всякого спана, ну да ладно...

.list div.under-list-visible ul {
  display: none;
}

.list div.under-list-visible>input:checked+label+ul {
  display: block;
  margin-left: 2em;
}

ul {
  list-style: none;
}

.span-under-list2 {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}


/* тут я пытаюсь обратиться к стрелке, чтобы изменить её направление, 
мне надо будет её повернуть, чтобы она смотрела вниз, 
в качестве теста я просто меняю ее цвет, 
но видимо порядок обращения к элементам нарушен, не понимаю как это работает */

.list div.under-list-visible>input:checked + label .span-under-list2 {
  border-right: 0.2em solid red;
  border-top: 0.2em solid red;
}

<ul class="list">
  <li>
    <div class="under-list-visible">
      <input type="checkbox" id="under-list2" style="display:none;" />

      <label for="under-list2">
    <span class="span-under-list2"></span>
     1 (подсписок)</label>

      <ul class="hide-list">
        <li>а</li>
        <li>б</li>
        <li>в</li>
      </ul>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

Изменить контент тега при определенных условиях /checked //дерево css

Ответы (1 шт):