какой селектор css3 использовать для выбора последнего дочернего элемента при наведении?

Question

возможно ли сделать что-то вроде этого:

<div>
    <ul>
        <li>
            <span>Something</span>
        </li>
        <li>
            <span>Something</span>
        </li>
        <li>
            <span>Something</span>
        </li>
    </ul>

    <p>Some text</p>
</div>

При этом, когда я нахожу указатель мыши на любом из тегов 'li', затрагивается тег 'p'. Я знаю, что могу повлиять на 'span' в примере следующим образом:

li:hover span{
    /* Whatever css that is needed */
}

Я думаю о чем-то с n -ным ребенком, правильно ли я иду с этой мыслью?

div li:hover <some nth child syntax that I don't know>{
    /* Whatever css that is needed */
}

Или я открыт для любых других идей, если они строго css ... :-) Также не беспокойтесь о кросс-совместимости браузера ...

Answer 1

Я думаю, что вы ищите jQuery :has() селектор.К сожалению, это не является частью какой-либо спецификации CSS.

Это можно использовать следующим образом: div:has(li:hover) > p.

В стандартном CSS, хотя я не думаю, что это возможно.

---

Если вы довольны стилем p, когда какая-либо часть ul наведена (включая детей), это будет работать ( demo ):

ul:hover + p {
    color: red;
}