Select :: before element on ancestor: hover

Question

Select :: before element on ancestor: hover

I have a triangle css:

.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.triangle :: before property when: hover is applied to the .triangle class. Can I do this with css?

I thought it looked like this:

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

Or that:

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

but it is not.

I don't want to use a js solution because the rest of the document is pure css.

+3

css css-selectors css3 pseudo-class pseudo-element

Oleg Lokshyn 26 nov. '14 at 17:16

source to share

1 answer

Richard Parnaby-King · Accepted Answer · 2014-11-26T17:19:59+0000

You want to combine a selector:

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

The above element is in an element with a class triangle

when hover

d is on a pseudo element before

.

Select :: before element on ancestor: hover

More articles: