Диапазон выбора класса CSS

У меня этот бит CSS ниже. Как я могу сократить список классов кругов? Я хочу, чтобы иметь возможность сказать: "ОТ .circle01 К .circle23"Диапазон выбора класса CSS

.circle01, .circle02, .circle03, .circle04, .circle05, .circle06, .circle07, .circle08, .circle09, .circle10, 
     .circle11, .circle12, .circle13, .circle14, .circle15, .circle16, .circle17, .circle18, .circle19, .circle20, 
     .circle21, .circle22, .circle23 { 
      background-color: none; 
      display: none; 
      position: absolute; 
      z-index: 20000; 
      top: 255px; /*30*/ 
      width: 252px; 
      left: 145px; 
      height: 71px; 
      pointer-events:none; 
     }

В псевдокоде, я хочу что-то вроде:

.circle01 to .circle23 { 
     background-color: none; 
     display: none; 
     position: absolute; 
     z-index: 20000; 
     top: 255px; /*30*/ 
     width: 252px; 
     left: 145px; 
     height: 71px; 
     pointer-events:none; 
}

EDIT, нашел решение:

 div[class^="circle"] { 
      background-color: none; 
      display: none; 
      position: absolute; 
      z-index: 20000; 
      top: 255px; /*30*/ 
      width: 252px; 
      left: 145px; 
      height: 71px; 
      pointer-events:none; 
     }

источник

2014-03-22 viksra

Для этой работы вам нужен общий класс для всех. Вы не можете писать петли в CSS – stackErr

Так же, как и в стороне, если каждый из них действительно уникален, вы, скорее всего, захотите использовать идентификаторы для них, а не для классов. –

Вы можете использовать этот селектор атрибута

[class^=circle]

в соответствуют всем элементам, атрибут класса которых начинается с circle.

Примечание. Оно также будет соответствовать circlebar и не будет соответствовать shape circle01.

Или это один

[class*=circle]

, чтобы соответствовать всем элементам, атрибут класса содержит circle

Примечания это будет также соответствовать foocirclebar.

источник

2014-03-22 17:02:35 Oriol

http://www.w3.org/TR/css3-selectors/#attribute-substrings – Wex

Добавление к этому: 'DIV [класс | = "круг"]' предполагая, содержащиеся в нем жгуты в DIV – stackErr

Это правильный ответ, рассматривающий решение «только css», но не самый семантичный/более быстрый, не так ли? – enapupe

-1

Вам нужно будет включить каждое имя класса в CSS. Лучший способ сделать это было бы с JQuery каждого, который применяется класс к первому х из .circle

источник

2014-03-22 16:59:58 Shadaez

Но почему jQuery? :) – Shomz

Почему ????????????????????????????????? Люди в настоящее время добавляют jQuery, прежде чем даже объявить doctype .. – enapupe

Ну js или jq. Просто сказал jquery, потому что большинство людей его используют. Выбор диапазона был бы возможен только таким образом, хотя переосмысление того, как вы закодировали вещи, скорее всего, лучший вариант. – Shadaez

Добавить общий класс к каждому из них и просто выбрать их так:

.circleCommon { 
    background-color: none; 
    display: none; 
    position: absolute; 
    z-index: 20000; 
    top: 255px; /*30*/ 
    width: 252px; 
    left: 145px; 
    height: 71px; 
    pointer-events:none; 
}

You не может использовать диапазоны в CSS.

источник

2014-03-22 17:00:14 Shomz

Спасибо. Нашел решение. \t \t \t ДИВ [класс = "круг"] { \t \t \t \t материал; \t \t \t} – viksra

класс круг Добавить к каждому кругу, класс = "круг circle01", класс = "круг circle02", и т.д. чем:

.circle { 
     background-color: none; 
     display: none; 
     position: absolute; 
     z-index: 20000; 
     top: 255px; /*30*/ 
     width: 252px; 
     left: 145px; 
     height: 71px; 
     pointer-events:none; 
}

источник

2014-03-22 17:00:32 enapupe

Диапазон выбора класса CSS

ответ

Смежные вопросы