WardVa WardVa - 4 months ago 68
CSS Question

Select parent element in stylus

I'm using the css preprocessor Stylus and i'm trying to select the first parent of an element.

<li><span class="correct">Ja</span></li>
<li><span class="inCorrect">Nee</span></li>
<li><span class="inCorrect">Mss</span></li>

I want to style the li element depending on the class of the span element.

Is this possible?


No, it is not possible in CSS, and in Stylus as it is just compiled into CSS.

However, you could somewhat emulate it in some cases, when you want to change just how the parent looks: you can use another element after the one with the class, and stretch in onto the parent, see this demo: http://dabblet.com/gist/7638112

The HTML you'd need there:

<li><span class="correct">Ja</span><span class="helper"></span></li>
<li><span class="inCorrect">Nee</span><span class="helper"></span></li>
<li><span class="inCorrect">Mss</span><span class="helper"></span></li>

and CSS:

li {
    position: relative;
    z-index: 1;

.helper {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

.correct + .helper {
    background: lime;

.inCorrect + .helper {
    background: red;