Can we reduce the number of classes and pseudo classes sharing the same style?

Question

How can I condense the following CSS into a more concise LESS code?

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

Here is my attempt:

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

As a result, we get:

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

The selector .push-nav > .active > a seems to be missing.

Any other suggestions on how to improve this further?

Answer 1

Answer №1

.push-nav > .active > a is not showing up because you have left it out.

The symbol & is used to represent the current selector in your CSS.

To fix this issue, add the following code:

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

In your code,

& = .push-nav > .active > a

. Therefore,

&:focus = .push-nav > .active > a:focus

.

Answer 2

.push-nav > .active > a is not showing up because you have left it out.

The symbol & is used to represent the current selector in your CSS.

To fix this issue, add the following code:

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

In your code,

& = .push-nav > .active > a

. Therefore,

&:focus = .push-nav > .active > a:focus

.