Можно ли получить информацию о статусе элемента из отдельного поддерева? (CSS -только) - PullRequest
Новая
       7

Можно ли получить информацию о статусе элемента из отдельного поддерева? (CSS -только)

0 голосов
/ 19 марта 2020

Звучит немного сложно - позвольте мне немного разбить его на части.

Что я имею в виду под "информацией о состоянии элемента"

Это просто относится к в любом случае таргетинга на элемент html. Очень простым примером будет псевдокласс :hover.

Отдельное поддерево - это что еще?

Страницу HTML можно рассматривать как дерево (структура данных) . Каждый элемент страницы или «узла» (например, <div>) может содержать другие узлы. Если существует более одной ветви дерева, тем самым создавая поддеревья.
Таким образом, на самом деле речь идет о контенте, который находится внутри соседнего элемента страницы . 

<div>subtree A</div>
<div>subtree B</div>

Последний улов

Мне бы очень хотелось, чтобы решение могло быть принято без использования :target, , потому что на нем только один активный экземпляр стр. На самом деле у меня есть решение, использующее его, но не нужно было бы его использовать.

Цель

Мне кажется, селектор CSS, который ведет себя в стиле if exists(elment:hover), применяет стиль для other element

HTML

<div>
    <p class="input">Mouse over me</p>
</div>
<div>
    <p id="output">Text above is hovered</p>
</div>

CSS

.input:hover => #output {
  background-color: red;
}

Моя идея заключается в том, что здесь p#output становится красным, когда пользователь парит над p.input.

То, чего я достиг до сих пор

Самое близкое, что я получил, это просто подняться на дерево по любому числу, но это не дает информации из поддерева (здесь о п): /

HTML

<div>
    <p>1</p>
</div>
<div>
    <p>2</p>
</div>
<div>
    <p>3</p>
</div>
<div>
    <p>4</p>
</div>

CSS

* {
  padding: 1rem;
  margin: 0.25rem;
  float: left;
}

div {
  background-color: darkblue;
}

p {
  background-color: darkred;
  font-size: 5rem;
}

div:hover ~ div  { /* this only checks if an earlier node has a certain status */
  background-color: blue;
}

div:hover + div  {/* same :S */
  background-color: green;
}

Я не нашел способа получить информацию о поддеревьях с помощью обычного селектора. Многообещающими, но неудачными попытками были:
(div p:hover) ~ div {, div > p:hover^ ~ div {

Использование :target

Это на самом деле удивительно просто.

HTML

<div>
    <a href="#1">1</a>
</div>
<div id="1">
    <a href="#2">2</a>
</div>
<div id="2">
    <a href="#3">3</a>
</div>
<div id="3">
    <a href="#">4</a>
</div>

CSS

* {
  padding: 1rem;
  margin: 0.25rem;
  float: left;
}

div {
  background-color: darkblue;
}

a {
  background-color: darkred;
  font-size: 5rem;
}

div:target ~ div {
  background-color: blue;
}

div:target {
  background-color: green;
}

Ранее я использовал div, установленный на display; none, позже тег <meta>, и теперь я наконец-то могу снова подумать и применить его непосредственно ^^

Последние слова

Если нужно, go для супер хакерского стиля. Чем незнакомее, тем больше можно извлечь из этого.
Это все, что я получил, сделай меня счастливым:)

...