Does Less have a feature to shorten input type selectors?

css, less

Solution

You can use less like regular CSS applies:

.form-group > input {
  &[type="text"], &[type="password"], &[type="email"] {
     &:hover, &:active {
       max-width: 400px;
     }
  }
}

The ampersand (`&`) references the `input` element, and you just add a rule for the `type` attribute

Problem

I have written this css: ``` .form-group > input[type="text"], .form-group > input[type="text"]:hover, .form-group > input[type="text"]:active, .form-group > input[type="password"], .form-group > input[type="password"]:hover, .form-group > input[type="password"]:active, .form-group > input[type="email"], .form-group > input[type="email"]:hover, .form-group > input[type="email"]:active { max-width: 400px; } ``` and i know that i can shorten this by writing ``` .form-group > input[type="text"], .form-group > input[type="password"], .form-group > input[type="email"] { max-width: 400px; &:hover, &:active { } } ``` Well, the second code part is what i really did write, the first one is just for the dramaturgy of the question, i guess ;) Now i wonder if there is a feature that allows to group the input type selectors as well, something like this: ``` .form-group > input { $:text,password,email max-width: 400px; &:hover, &:active { } } ```

Original source