0

In my CSS, I have something like this:

.classA .class1,
.classA .class2,
.classA .class3 a:hover,
.classA .class4,
.classA #id1,
.classA .class5 
{ color: white;}

.classA .class1,
.classA .class6
{ background-color: red;}

etc...

Since I am repeating .classA so much, I wondered if there is a more efficient way to write this?

My use case:

I'm styling different pages with similar elements but with different color schemes. So rather than .classA I'm adding a class of .Orange to one page and say, .Green to another, .Blue to a third.

Then I'm applying orange and green and blue styling respectively to the elements on those pages. 

.Orange .btn,
.Orange .accordion-heading,
.Orange .promo-box {color: orange; background: white;}
.Orange h2 {color: orange;}

.Green .btn,
.Green .accordion-heading,
.Green .promo-box {color: green; background: white;}
.Green h2 {color: green;}
jough
  • 9
  • 2
  • What do those classes actually represent? “one-to-many relationship” doesn’t explain much. – Ry- Aug 27 '17 at 14:59
  • You are basically applying styles to .class2, .class3 etc. here if they exist anywhere inside .classA. If that is not your primary requirement, you can separate classes. – Amit Kumar Singh Aug 27 '17 at 15:02
  • If you need to specify .classA as a parent for all of these, then no, not that I can think of. It'd be a lot easier to write this code in a preprocessor like LESS or SASS though, since you could just nest all the other classes under .classA or use mixins to repeat code quickly. – Jesse Aug 27 '17 at 15:20
  • You can use a preprocessor like Sass or LESS. – jhpratt Aug 27 '17 at 15:28
  • @Ryan: They represent descendants that all have a common ancestor. So, one ancestor to many descendants. – BoltClock Aug 27 '17 at 15:51
  • 1
    Sorry, I should have given a better example .classA is there to target a particular page. .class(n) is to target an element on that page. .class(n) is reused on other pages, each with unique styling. So for example I want certain pages to have an orange color theme, so for any page with .Orange I can then give the elements orange font, border, etc. on the various elements on that page. Another page may have .Green – jough Aug 27 '17 at 15:55
  • @BoltClock: As you can imagine, I know what selectors *do* =) Asking what they *represent*, content-wise (exactly what jough just answered with – thanks!). – Ry- Aug 27 '17 at 16:08

1 Answers1

0

You don't need to repeat .classA at all unless you wish for it to have precedence over other selectors. When you use selectors in tandem, as in your example, you are increasing the specificity of the rule. For instance, take the following code:

.classA .class1 {color:red;}
.class1 {color:white;}

<div class="classA">
  <div class="class1">Text</div>
</div>

The result is a red color text since your first rule is more specific than the second even though the second comes later in the source order.

CSS specification stipulates that selector precedence is subject to three factors, in order:

  1. Importance
  2. Specificity
  3. Source order

So, the amount of selector repetition is largely up to how you set-up your stylesheet and the desired outcome. More info here:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

Julio Feferman
  • 2,658
  • 3
  • 15
  • 26
  • 1
    "You don't need to repeat .classA at all unless you wish for it to have precedence over other selectors." I would assume that's exactly why the asker is specifying the .classA class at all. Why are you so sure they don't need to? – BoltClock Aug 27 '17 at 15:48
  • I am not sure, and am just assuming, as you are, since the question is vague and conceptual. Perhaps the correct answer is no you can't unless you use a pre-processor. At any rate, CSS structure can lend itself to myriad solutions and more info can help the asker better structure her code. – Julio Feferman Aug 27 '17 at 16:07