Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Group css selectors in LESS for pseudo class use

Tags:

css

less

Say I have a group of elements that I want to apply pseudo classes to, is there a way to define muliple elements in a variable and then apply a pseudo class to all of them at once? Like so:

@inputs: input[type=text], input[type=email], input[type=password], textarea;

@inputs {
    //some styles;
}

@inputs:focus{
    //some focus-specific styles;
}

Apologies if this is too obvious, I am reletively new to LESS

like image 820
harryg Avatar asked Jul 15 '13 19:07

harryg


People also ask

Can you use multiple pseudo-class selectors with an element?

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement. Note: As a rule, double colons ( :: ) should be used instead of a single colon ( : ).

What are pseudo-class selectors commonly used for?

A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it. Style visited and unvisited links differently.

Can CSS classes combine with pseudo classes?

Combining pseudo classes with CSS classesIt is possible to combine pseudo classes and regular CSS classes. This combination lets you style elements that have specific classes and also react to certain external factors.

Can you combine pseudo selectors?

If you're talking about pseudo-classes, then yes, you can combine them in any order.


1 Answers

I am not sure if you can do that but this works too. I am assuming you just want to write the long pseudo class once.

input[type=text], input[type=email], input[type=password], textarea {
   // styles for normal

   &:focus {
      // styles for focus
   }

   &:hover {

   }
}
like image 191
Huangism Avatar answered Sep 21 '22 02:09

Huangism