1

How do I select each dynamically generated div by class?

<div class="thumbs-1 col-sm-4 col-md-4"></div>
<div class="thumbs-2 col-sm-4 col-md-4"></div>
<div class="thumbs-3 col-sm-4 col-md-4"></div>
<div class="thumbs-4 col-sm-4 col-md-4"></div>
etc

My static simplified css looks like

.thumbs-1 {
    display: inline-block;
    vertical-align: top;
}
.thumbs-2 {
    display: inline-block;
    vertical-align: top;
}
.thumbs-3 {
    display: inline-block;
    vertical-align: top;

}
.thumbs-4 {
    display: inline-block;
    vertical-align: top;
}

How can I make my .css file dynamic??

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
alex
  • 4,804
  • 14
  • 51
  • 86
  • Why not use .thumbs as class name instead of thumbs-1 etc, if the CSS content is the same in each case? – blueygh2 Feb 13 '15 at 09:26

3 Answers3

5

Yes, you can use a form of regex

div[class^='thumbs-'] {
    color: black;  
}

Means, select class with name starting from thumbs-

Szymon Roziewski
  • 956
  • 2
  • 20
  • 36
  • How do i combine the thumbs- with img so i can target .thumbs-1 img { div[class^='thumbs-'] img ?? – alex Feb 13 '15 at 09:32
  • `div[class^='thumbs-'] img{ width:20px; }` that way you can select img elements inside divs with classes starting from `thumbs-` – Szymon Roziewski Feb 13 '15 at 09:41
2

Use attribute selector:

[class^="thumbs"]{
   display: inline-block;
   vertical-align: top;
}

[attr^=value]

Represents an element with an attribute name of attr and whose value is prefixed by "value".

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
2

You want the following CSS selector

div[class^="thumbs-"], div[class*=" thumbs-"] {
    display: inline-block;
    vertical-align: top;
}
Pattle
  • 5,983
  • 8
  • 33
  • 56