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
  • 704,970
  • 168
  • 1,303
  • 1,425
alex
  • 4,634
  • 14
  • 46
  • 83
  • 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

4

Yes, you can use a form of regex

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

Means, select class with name starting from thumbs-

Szymon Roziewski
  • 876
  • 2
  • 19
  • 34
  • 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
  • 78,842
  • 31
  • 152
  • 211
2

You want the following CSS selector

div[class^="thumbs-"], div[class*=" thumbs-"] {
    display: inline-block;
    vertical-align: top;
}
Pattle
  • 6,653
  • 7
  • 30
  • 54