0

Is there a shorthand way to write the following css classes that all have the same style?

.gtlab1-17, .gtlab1-19, .gtlab1-21, .gtlab2-17, .gtlab2-19, .gtlab2-21, .gtlab3-17, .gtlab3-19, .gtlab3-21 {margin-left:-3px;}

I need to avoid picking up:

.gtlab1-16, .gtlab2-16, .gtlab3-16
and
.gtlab1-15, .gtlab2-15, .gtlab3-15

which have different styles.

Thanks.

martin
  • 393
  • 1
  • 6
  • 21
  • If all of them had a common class then it would be easier. You can also match partial class name and then for the exceptions, do an override after – Huangism Feb 20 '14 at 18:02
  • possible duplicate of [How to show images by name (prefix)](http://stackoverflow.com/questions/19300997/how-to-show-images-by-name-prefix) – cimmanon Feb 20 '14 at 18:06
  • This one is a little better: http://stackoverflow.com/questions/3338680/css-selector-by-class-prefix – cimmanon Feb 20 '14 at 18:07

3 Answers3

1

Mabye try this:

div[class^="gtlab"] {
    border: 1px solid magenta;
}

div.gtlab2-16, div.gtlab1-57 {
  border: 0;
}

If finds divs that have "gtlab" somewhere in its class, and then override the ones you want to exclude.

reference is here: this site i have bookmarked and i revisit that page all the time http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

You could add the same class to all elements as suggested, but if you dont have access to the html (using CMS or what ever) You could add a class to the elements with jQuery .addClass() and having div[class^="gtlab"] as your selector.

DuddiMai
  • 56
  • 3
  • Thanks DuddiMai, but I would have a lot of classes to override? – martin Feb 20 '14 at 18:52
  • well if you have more to exclude than the 6 in your example then its perhaps not a good solution. then you need to add a class to those you want and another class to those you dont want. – DuddiMai Feb 20 '14 at 19:44
0

Use more classes? It seems like the gtlab2 part is describing one aspect while the number is representing another. Why not split it into two distinct classes that can be used together?

Jake
  • 383
  • 6
  • 26
0

Short answer is:

[class*=gtlab]:not([class*=-16]):not([class*=-15])

But depending on the rest of your code and expected browser support (IE8?), this may not work.

Long answer is, change your HTML if you have that option or just use the long version, it's really not going to cost you much more in terms of coding time or download time and will probably be quicker to render.

Godwin
  • 9,739
  • 6
  • 40
  • 58
  • Thanks Godwin, I will probably accept this as the answer and in view of your comment on rendering - do it the long way. I just thought there might be a wildcard method, something like: .gtlab*-17, .gtlab*-19, .gtlab*-21 {} – martin Feb 20 '14 at 18:58