0

As we know, there's several CSS shortcuts (greater than, classes joined without spacing etc. etc.) but I'm wondering if we can state multiple parent CSS classes, while the children remain the same ?

For ease, I'm using a simple example...

Instead of:

.node-type-sponsors .container .page-header, 
.node-type-supporters .container .page-header 
{color:blue;}

Is there a shorter way of writing this by specifying the parent classes to be affected, but only listing the children once...

eg: 

.node-type-sponsors,.node-type-supporters 
[I assume something would go here to signify we've moved onto child elements] 
.container .page-header 
{color:blue;}
pavel
  • 26,538
  • 10
  • 45
  • 61
wotney
  • 1,039
  • 3
  • 21
  • 34
  • Can you not just add another class to the html elements required and reference that instead? – Glenn Holland Feb 18 '15 at 11:39
  • Not with CSS.. a pre-processor.language like SASS/LESS might be able to do that but it's still going to output the same CSS. In other words the pre-processor will make **writing** the CSS quicker but it won't reduce the output result. – Paulie_D Feb 18 '15 at 11:40
  • No, it isn't possible. In this case you can *probably* use `.container .page-header` without parent definition. If not, there is no way how to make your code shorter. – pavel Feb 18 '15 at 11:41
  • possible duplicate of [Can a CSS class inherit one or more other classes?](http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes) – Paulie_D Feb 18 '15 at 11:42

2 Answers2

1

No it isnt possible with out sass/less etc

As an hack if you have exactly same scenario that you have a pattern matching in an class name either at start or end you can do something like, you can see for starting match attribute

 [class^="node-type"] .container{}

Working Demo:

[class^="node-type"] .container{
color:red;
}
<div class="node-type-sponsors">
  <p class="container ">abc</p>
 </div>
<div class="node-type-supporters">
  <p class="container">abc</p>
 </div>
A.B
  • 20,110
  • 3
  • 37
  • 71
1

In this snippet, every <p> element that has a parent of div, or span with the specified classes got yellow background. You are looking for the > combinator.

.this-is-a-div, .this-is-a-span > p {
    background-color: yellow;
}
<span class="this-is-a-span">
<p>Paragraph in a span.</p>
</span>

<div class="this-is-a-div">
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

You can read more about it here. Hope that helps.

balintpekker
  • 1,804
  • 4
  • 28
  • 42