CSS hierarchy issue

Question

So I have this CSS code

.body .card .card_img:hover, <- works
.body .card .card_bg_layer:hover ~ .card_img <- does not work {
    border-radius: 2px;
    box-shadow: 0px 0px 18px black;
    max-width: 85%;
    max-height: 100%;
    left: -20px;
    top: -20px;
}

.body .card .card_img:hover ~ .card_bg_layer, <- works
.body .card .card_bg_layer:hover <- works {
    opacity: 0.2;
}

and this is how my html looks like

as u may know, I want .card_img to do something when .body .card .card_bg_layer is hovered, someone told me that css can only go down and not up, while I have no doubt that that's true but is css really that limited?

note: I did saw https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element but I do not understand what they meant — Onii-Chan, May 02 '21 at 09:08
'someone told me that css can only go down and not up' - that is correct. There are no parent selectors in CSS, to go 'up' the hierarchy you would need to use Javascript, or refractor your code. — paddyfields, May 02 '21 at 09:24
There is no concept of 'sibling above' in CSS so the answer is 'yes, it is that limited'. Depending on what you actually want to do it's sometimes possible to look for the hover on the parent and make adjustments. Otherwise you need to reorder your HTML or use JS. — A Haworth, May 02 '21 at 09:26

score 0 · Answer 1 · answered May 02 '21 at 09:22

The ~ (tilde) is used as part of the Subsequent-sibling combinator, which says:

The subsequent-sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

It is important to note that the first sequence must precede the second one.

(This is not the case in your example.)

CSS hierarchy issue

1 Answers1