.contacts form .name, .contacts form .email, .contacts form .message { ... }

How to write such a selector more compact?

    3 answers 3

    To get a separate class for input in the forms .form__input

      Just enter the input { стили } styles for input { стили } in this case you will set the styles for all input fields. If you have several forms and inputs have to have different styles, then .contacts-1 input { стили } styles for the first form, .contacts-2 input { стили } styles for the second form, and so on.

        As an option, you can do so:

         .contacts form [class|=xxx] { color: red; } 
         <div class="contacts"> <form> <input class="xxx-name"> <br> <br> <input class="xxx-email"> <br> <br> <textarea class="xxx-message"></textarea> </form> </div>

        https://jsfiddle.net/4h0cqgfd/

        Read more about the selector [атрибут|="значение"] here: https://webref.ru/css/selector/attr7 .

        • Hmm .. But why ?? - Qwertiy ♦
        • @Qwertiy, for example, for grouping: make the next group yyy . But in general, I, in particular, do not often use a similar selector, but cases have happened; which ones I do not remember exactly, but I used to remember. - Roman Grinyov
        • I meant, why not just hang a separate class xxx and make the selector .contacts form .xxx , or simply .xxx . Why these frills with [class|=xxx] ? - Qwertiy ♦
        • @Qwertiy, yes, it is possible and so, and a bunch of options - I just brought one of them; and specifically, as you yourself understand, you need to look at the situation and make it as clearer, more convenient, and so on. - Roman Grinyov