Блог

Главная - Вопросы по программированию - Возможно ли в CSS использовать математику подобным образом?

Возможно ли в CSS использовать математику подобным образом?

#css

#css

Вопрос:

У меня есть элементы с такими классами, как

 <div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
<div class="class5"></div>
...etc...

Каким-то образом можно использовать 1 правило в css для всех этих классов?


Нравится 

 .class[1-5]{
  margin-top:5px;
}

это?

Или это возможно только с JS?

Комментарии:

1. Класс может быть применен к нескольким объектам, поэтому вам нужно написать только одно правило. Поэтому просто дайте один и тот же класс всем элементам, на которые вы хотите настроить таргетинг. Еще вы можете сделать: .class-1, .class-2 и т.д.

2. в чистом CSS вы могли бы настроить таргетинг только на все элементы, начинающиеся с class , например [class^="class"] { margin-top: 5px; }

Ответ №1:

В качестве альтернативы, вы можете просто сделать все элементы одного класса. так:

 <div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>
<div class="example"></div>

и просто используйте css:

 .example    {
  margin-top:5px;
}

Вы можете это сделать, потому что class могут быть применены к нескольким элементам (в отличие от id), даже если они относятся к разным типам элементов.

Ответ №2:

Используйте селектор атрибутов в css

 [class ^= "class"] {

  margin-top:5px;
}

ДЕМОНСТРАЦИЯ

Комментарии:

1. можете ли вы это объяснить?

2. Это выглядит как полезный ответ, однако я действительно не понимаю, как работает оператор в более общем случае. Хотите добавить объяснение или ссылку на него?

3. @vlrprbttst смотрите ссылку, это полезно для вас

4. Вы хотите быть осторожными с началом, так как это не сработает, если class1 был второй класс, например, <div class="example class1"></div> не был бы оформлен

5. @Sudharsan Я это знаю. Но это не самое подходящее место для ее использования. Да, вы ответили на вопрос — и это хорошо. Но он должен знать, чтобы А) на самом деле не использовать это без уточнения селектора, и Б) что второй класс является гораздо лучшим решением.

Ответ №3:

Вы можете сделать:

 .class1, .class2, .class3, .class4, .class5 {
  margin-top: 5px;
}

Или еще лучше, поместите два класса в свои divs:

 <div class="class1 marginClass"></div>

.marginClass {
  margin-top: 5px;
}