CODEWITHSUNDEEP
cssless
Elisabeth
Elisabeth

Reputation: 21206

Nest pseudo class like hover/focus into a hyperlink with LESS

I use LESS.

How can I say that the hover/focus belongs to the first > a can I somehow put the hover/focus inside the > a?

 > ul > li > a {
        color: #fff;
        text-decoration: none;
    }

    > a:hover, > a:focus { // login, register
        background-color: @navbar-background-color;
    }

Upvotes: 1

Views: 263

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

You can use LESS's Parent Selector (&) to include selectors belonging to the current selector:

The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector.

> ul > li > a {
    ...

    &:hover,
    &:focus {
        ...
    }
}

Upvotes: 1

Related Questions