Access parent element

Question

I have the following html and less

<div class="status">
    <div>
        <div>
            <p class="status-1">Test</p>
        </div>
    </div>
</div>

.status {
    div {
        div {
            p {
                color: red;

                .status-1 {
                    color: blue;
                }
            }
        }
    }
}

Where there is a <p> element nested in a couple of divs. Now I'm looking to add the status-1 class to the base div, to create a html structure like this:

<div class="status status-1">
    <div>
        <div>
            <p>Test</p>
        </div>
    </div>
</div>

But now I can't figure out how to access the .status element from inside the p element in less. I could just type

.status {
    &.status-1 {
        div {
            div {
                p {
                    color: blue;
                }
            }
        }
    }
}

But since there are multiple .status classes (e.g. status-0, status-1, status-2) that would suck to copy paste that same bit of code. Is there any way in less I would be able to access the parent .status element? I was hoping for something like

.status {
    div {
        div {
            p {
                color: red;

                ->parent(.status.status-1) {
                    color: blue;
                }
            }
        }
    }
}

Thanks guys!

Answer 1

See Parent Selectors, e.g.:

.status {
     p {
        color: red;
        .status-1& {
            color: blue;
        }
    }
}

Note that though the generated selector is .status-1.status, it still matches both class="status status-1" and class="status-1 status" elements.