How to write ~ selector in LESS?

user_2548459 0
Viewed 43

How to write this rule in LESS? I've been looking in documentation at http://lesscss.org/, but I did not find anything :(

input.text:focus { border: 1px solid #f00; }
input.text:focus ~ label.placeholder,
input.text:not(:focus):valid ~ label.placeholder { color: #f00; }

I have figured out this, it works, but I do not know how to correctly add the third line into this:

input.text { padding: 15px; background: #fff;
    &:focus { border: 1px solid #f00;
        ~label.placeholder { color: #f00; }
    }
}
less css
1 Answers

Do it like below

input.text { padding: 15px; background: #fff;
    &:focus,&:not(:focus):valid {
        ~label.placeholder { color: #f00; }
    }
    &:focus {
       border: 1px solid #f00;
    }
}

That will compile into

input.text {
    padding: 15px;
    background: #fff;
}

input.text:focus ~ label.placeholder,
input.text:not(:focus):valid ~ label.placeholder {
    color: #f00;
}

input.text:focus {
    border: 1px solid #f00;
}
user_86203330
Related