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

как написать такой селектор компактнее?

0

3 ответа 3

1

отдельный класс завести для инпутов в формах .form__input

0

Просто для инпута пропишите стили input { стили } в таком случае вы зададите стили всем полям инпут. Если у вас несколько форм и у инпутов в них должны быть разные стили тогда .contacts-1 input { стили } стили для первой формы, .contacts-2 input { стили } стили для второй формы и так далее.

0

Как вариант можно сделать так:

.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/


Подробнее о селекторе [атрибут|="значение"] читайте здесь: https://webref.ru/css/selector/attr7 .

4
  • Хм.. Но зачем??
    – Qwertiy
    12 мая 2016 в 17:15
  • @Qwertiy, например, для группировки: следующую группу сделать yyy. Но вообще я, в частности, не часто подобный селектор использую, но случаи бывали; какие конкретно уже не помню, но помню использовал. 12 мая 2016 в 17:51
  • Я имел в виду, почему бы просто не повесить отдельный класс xxx и сделать селектор .contacts form .xxx, а то и просто .xxx. Зачем эти выкрутасы с [class|=xxx]?
    – Qwertiy
    12 мая 2016 в 17:52
  • @Qwertiy, да, можно и так, и ещё куча вариантов — я привёл просто один из них; а конкретно, как вы и сами понимаете, — нужно смотреть по ситуации и делать как наглядней, удобней и так далее. 12 мая 2016 в 17:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.