0

Aside from using a CSS preprocessor, is there a way to add a class to every selector in a stylesheet, without repeating it?

For example, if I have a stylesheet that looks like this:

#id1 .class1 {
  color: #ccc;
}

#id1 .class2 {
  color: #ddd;
}

#id1 .class3 {
  color: #eee;
}

Is there any way I can format it without having to repeat #id1 for every selector?

Josh Warren
  • 196
  • 3
  • 14
  • Using comas I believe... – Joel Hernandez Feb 11 '14 at 05:54
  • I could use commas to avoid repeating the styles if they're same for each class. How could I use commas to apply #id1 to each class without repeating it every time though? – Josh Warren Feb 11 '14 at 06:40
  • Looking at your example above, it doesn't make sense to group them because they do not have styles in common. However, if they did later on, as the rest above me mentioned, you can group them using a `comma`. – EmileKumfa Feb 11 '14 at 06:45
  • Perhaps my example wasn't clear enough. I'm used to using the nesting structure available in preprocessors like LESS, where I would only have to write #id1 once, and then nest the classes inside of that. So I would only have to include #id1 with brackets around my existing css. I'm just wondering if there's any similar way of doing this without CSS, without having to repeat the id/parent element for every selector. – Josh Warren Feb 11 '14 at 07:29

2 Answers2

1

Put an extra class in your HTML:

<div id="id1">
   <div class="class1 class-grey">…</div>
   <div class="class2 class-grey">…</div>
   <div class="class3 class-grey">…</div>
   <div class="class4">…</div>
   <div class="class5">…</div>
</div>

…than style this new class with CSS:

#id1 .class-grey {
  color: #ccc;
}
fboes
  • 2,149
  • 16
  • 17
-1

This question is a little bit similar to this - wildcard * in CSS for classes.

Have you tried using these selectors?

Community
  • 1
  • 1
Adrian Enriquez
  • 8,175
  • 7
  • 45
  • 64
  • That's interesting and yes it would work for the example I posted, but my actual application is a bit more complicated so I wouldn't be able to utilize that. – Josh Warren Feb 11 '14 at 07:26
  • Check this article, maybe you can find an answer to your question. http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 – Adrian Enriquez Feb 11 '14 at 07:42
  • While these selectors offer interesting functionality they're really slow performance-wise and should be avoided whenever possible. – Etheryte Feb 11 '14 at 11:40