Less multiple classes and pseudo classes with the same style?

Question

How can I simplify the css below in LESS code?

.push-nav > .active > a,
.push-nav > .active > a:hover,
.push-nav > .active > a:focus {
    background:#000;
    color: #fff;
}

My attempt:

.push-nav > .active > a {
    &:focus,
    &:hover {
        background:#000;
        color: #fff;
    }
}

Result:

.push-nav > .active > a:focus,
.push-nav > .active > a:hover {
  background: #000;
  color: #fff;
}

.push-nav > .active > a is missing.

Any ideas?

Just to reiterate @Harry's point on your identical question, CSS is valid LESS so if you don't have a specific reason to refactor like hungerstar's solution your original code will do just fine — henry
– henry, Commented Oct 31, 2016 at 14:46

hungerstar · Accepted Answer · 2016-10-28 16:07:08Z

3

.push-nav > .active > a is missing because you haven't included it.

The ampersand & represents the current selector.

Add:

.push-nav > .active > a {
    &,
    &:focus,
    &:hover {
        background: #00;
        color: #fff;
    }
}

In your code & = .push-nav > .active > a. So &:focus = .push-nav > .active > a:focus.

answered Oct 28, 2016 at 16:02

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1