Select ::before element on ancestor :hover

css, css-selectors, pseudo-class, pseudo-element

Solution

You want to combine the selectors:

.triangle:hover::before {
    border-bottom-color: red;
}

The above is on the element with class `triangle`, when `hover`d, on the `before` pseudo element.

Problem

I have a css triangle: ``` .triangle { display: block; height: 95px; position: relative; } .triangle::before, .triangle::after { content: ' '; width: 0; height: 0; position: absolute; border-style: solid; border-color: transparent; } .triangle::before { border-width: 10px 50px 85px 50px; border-bottom-color: #F5EACB; z-index: 2; } .triangle::after { border-width: 10px 56px 94px 56px; border-bottom-color: #FFFFFF; left: -6px; top: -6px; z-index: 1; } ``` I want to change the border-bottom-color property of .triangle::before when :hover is applied to .triangle class. Is it possible to do this with css? I thought it looks like this: ``` .triangle:hover .triangle::before { border-bottom-color: red; } ``` Or this: ``` .triangle:hover .triangle::first-child { border-bottom-color: red; } ``` but it doesn't. I don`t want to use js solution, because the rest of the document is pure css.

Original source