Question

is it possible, to do something like this:

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

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

Whereby, when I hover on any of the ‘li’ tags, the ‘p’ tag is affected. I know I can affect the ‘span’ in the example with the following:

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

I’m thinking of something with nth child, am I going the right way with that thought?

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

Or I’m open to any other ideas, so long as they’re strictly css… 🙂 Don’t worry about browser cross compatibility either…

Answer 1

I think the kinda thing you’re after is jQuery’s :has() selector. Unfortunately, this isn’t part of any CSS spec.

That would be used like this: div:has(li:hover) > p.

In standard CSS though, I don’t think it it’s possible.

---

If you’re content to style the p when any part of the ul is hovered (which includes it’s children, then this will work (demo):

ul:hover + p {
    color: red;
}