CODEWITHSUNDEEP
cssless
Henson
Henson

Reputation: 5913

Multiple Selectors + Nested Rule

I have some less like below:

    .char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;

        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        .transform(rotate(30deg));
        }

        .char6:hover{
        .transform(rotate(-30deg));
        }
    }

So what I meant to do is to style char2-char6 hover state but specifically for char6, i want the hover to have some small extra styles.

Thanks in advance

Upvotes: 0

Views: 1937

Answers (3)

Jorge Epuñan
Jorge Epuñan

Reputation: 760

Found an elegant solution:

    .char2, .char3, .char5, .char6{
       display:inline-block;
       position:relative;

    &:hover{
       .text-shadow(@blueDark, 2px, 2px, 20px);
       bottom:0.1em;
       .transform(rotate(30deg));
    }

    &.char6:hover{
       .transform(rotate(-30deg));
    }
}

My own example here: http://codepen.io/juanbrujo/pen/sdApx

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 54021

Move your .char6:hover code outside of your .char2, .char3, .char5, .char6 code block and remove the preceeding dot from the transform method:

.char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;

        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        transform(rotate(30deg));
        }
    }

.char6:hover{
 transform(rotate(-30deg));
        }

I'm not familiar with the &:hover nested syntax so I'm taking your word for it that it's valid until I've had chance to research.

Upvotes: 1

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

I think you should remove the char6:hover out of the char2-char6 definition:

.char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;

        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        .transform(rotate(30deg));
        }
    }

.char6:hover{
        .transform(rotate(-30deg));
        }

Upvotes: 2

Related Questions