Стиль общей группы div в одном заявлении CSS

Question

У меня есть несколько div, которые динамически создаются в Javascript. Мне было интересно, возможно ли стилизовать их все сразу.

#somediv {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

#somediv2 {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

... и т. Д. (Это может быть даже 50 делений)

Я бы хотел изменить это на что-то вроде:

 #somediv* {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

Answer 1

Дайте вашему динамически созданному div-классу класс, затем стилизуйте класс. Или, может быть, если вы вставляете свои новые div в контейнер, вы можете просто выбрать на основе этого:

<div id='stuff_goes_here'>
  <!-- ... dynamic divs will go here ... -->
</div>

и затем:

#stuff_goes_here div {
  /* ... styles ... */
}

Answer 2

Если они будут оформлены точно так же, используйте класс, ищите здесь разницу :

.divClass {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

Тогда ваши дивы такие:

<div id="somediv" class="divClass"></div>
<div id="somediv2" class="divClass"></div>

Просто отредактируйте ваш скрипт, включив атрибут класса, безусловно, самое простое решение ... и это точно для чего предназначены классы:)

Answer 3

Это то, что атрибут класса был создан для обработки. Дайте всем своим div'ам один и тот же класс, и вы можете сказать что-то вроде:

.divclass {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

Но если вам действительно нужно сделать то, что вы просили, вы можете использовать новую форму селектора. Следующее будет соответствовать всем идентификаторам, которые начинаются с 'somediv', но это не будет работать в старых браузерах:

[id^=somediv] {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}

Answer 4

Я бы лично предложил использовать class, поскольку именно для этого они и предназначены; Вы можете, однако, сделать это, как вы хотите:

div[id^=somediv]
{
/* css styles */
}

Использование селектора CSS starts-with (http://reference.sitepoint.com/css/css3attributeselectors),, хотя он основан на реализации CSS 3 (я думаю) в вашем пользователе / ​​аудитории.

Answer 5

#somediv, #somediv2 {
    background-color: #F2F5FC;
    border-style:solid;
    border-bottom:thin dotted #33ccff;
}