css selector based upon neighbour elements visibility

Question

In the following structure

<dl>
    <dt>Text</dt>
        <dd>MoreText</dd>
    <dt>Text 2</dt>
        <dd>MoreText 2</dd>
</dl>

I want to gray out a text (dt) if the corresponding dd is set to display:none. I belive that there is a way to combine css selectors to achieve this, but can´t find a working solution.

No there isn't ... you cannot select the previous element using CSS — Mr. Alien, Oct 16 '14 at 12:21
Also, there is no way CSS can decide and apply styles based on elements visibility, but if the element is empty, then yes, you can use `:empty` pseudo — Mr. Alien, Oct 16 '14 at 12:22
@LcSalazar eh its fine, will delete my comments as I just wanted you to retract the false vote :) — Mr. Alien, Oct 16 '14 at 12:25

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

There is no such thing as a "previous sibling" selector. There is an "next sibling" selector, though.

See this question for reference.

edited May 23 '17 at 12:05

Community

1
1

answered Oct 16 '14 at 12:23

Elias

1,532
8
19

score 0 · Answer 2 · answered Oct 16 '14 at 12:24

0

There is no such thing. You must use JS/JQuery for manipulating classes. You must look on css rules like on XPath to an element, you can go only deeper, not on sides.

answered Oct 16 '14 at 12:24

Beri

11,470
4
35
57

score 0 · Answer 3 · edited Jan 22 '21 at 16:02

0

I think it's not possible in CSS as you want to do this based on a condition.

But you can use jQuery / JavaScript to achieve the same

By checking the status of neighbour.
Then getting parent of it.
Then selecting desired element finally.
Making changes to desired element.

edited Jan 22 '21 at 16:02

Giacomo1968

25,759
11
71
103

answered Oct 16 '14 at 12:24

Pratik

337
2
8

css selector based upon neighbour elements visibility

3 Answers3