0

I have a div that I can only select via this method in CSS.

#parent-div #child-div {// styles}

I want to change all of the h1, h2, h3, and p tags in the child div, which up until now I would do as follows: 

#parent-div #child-div h1, #parent-div #child-div h2, #parent-div 
#child-div h3, #parent-div #child-div p {
//styles
}

Is there a more efficient way of doing this? It seems such a waste of time to type #parent-div #child-div over and over again. Logically I would like to do #parent-div #child-div > h1, h2, h3, p but I know this won't work.

Any ideas on how to abbreviate this would be wonderful? I have big site with lots of CSS that needs changing / styling where I need to use multiple selectors.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
pjk_ok
  • 618
  • 7
  • 35
  • 90
  • 1
    `#parent-div #child-div > *` targets all immediate children inside `child-div` – kukkuz Aug 19 '17 at 23:33
  • This is where CSS preprocessors really come in handy. I know it's not a direct answer to your question, but this could be a lot less verbose if you used something like LESS or SCSS (at the expense of more configuration and needing to run a watcher to build your CSS whenever a file changes). – philraj Aug 19 '17 at 23:55
  • 1
    I'm voting to close this question as off-topic because questions asking to refactor working code belong on the Code Review site, not the Stack Overflow site. – TylerH Aug 19 '17 at 23:57
  • It's not off topic at all @TylerH. I'm having to code lots of new CSS as well as change legacy CSS - it's how to use code more efficiently via the CSS specification. It has already generated some helpful / useful comments. Just because you can't contribute anything positive to this subject doesn't mean you have to be vindictive. – pjk_ok Aug 20 '17 at 00:44
  • 1
    @EmilyChewy, Tyler is a huge contributor to this site. I don't think he was being vindictive, just following the guidelines. Anyway, what other elements are descendants of `#child-div`? – Michael Benjamin Aug 20 '17 at 01:22
  • 1
    @Michael_B: To be fair, the canned comment starts with "I'm voting to close this question as off-topic because..." This is not the first time somebody has pointed out the unnecessarily vindictive tone of that opening line, and now we have proof that such a perception is not just theoretical. – BoltClock Aug 20 '17 at 02:59
  • @EmilyChewy I meant no offense by it (nor could my tone possibly be vindictive... I don't think our paths have ever crossed before, so I could hardly be out for revenge against you). Your question was simply one that I viewed as off-topic. Even disregarding that, your question is both unclear and fairly broad. Luckily, BoltClock knew of a good duplicate. – TylerH Aug 20 '17 at 17:25

3 Answers3

1

There is this experimental feature :any. It is currently supported on gecko based and a few webkit based browsers.

For instance :

#parent-div > #child-div > :-moz-any(h1, h2, h3, p){
  /*stuff*/
}

Note that it is in the process of being standardized as :matches.

There isn't any other way around it that I'm aware of.

To learn more about it, see css :any @ MDN.

Vivick
  • 3,434
  • 2
  • 12
  • 25
1

Maybe try a reverse approach.

Instead of targeting elements, exclude elements.

You'll need to know the other element types that are descendants of the child div.

So if you want to style the h1, h2, h3 and p tags, try this:

#parent-div #child-div *:not(h4):not(h5):not(h6):not(div):not(span):not(nav):not(section)

However, if the element types are too many, unknown or unpredictable, then your original method looks perfectly fine.

#parent-div #child-div h1,
#parent-div #child-div h2,
#parent-div #child-div h3,
#parent-div #child-div p
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Thanks Michael that's good to know. – pjk_ok Aug 20 '17 at 13:12
  • Feasible, but you would need an exhaustive list of tags that are not the ones we want to style, which can be pretty long to do/write and can possibly be longer than declaring individually each desired case. – Vivick Aug 20 '17 at 19:51
  • @Vivick, maybe. Or maybe not. It could just be one or two tags in there. That's why I presented this option. – Michael Benjamin Aug 20 '17 at 19:54
0

If the parent and child divs are both targeted by ids, (presuming you're using ids properly and only have one instance of each) you can omit the #parent-div identifier, because #child-div is sufficient.

In many cases, your properties will be inherited (like font color and font size) based on specificity of the rule and inheritence on the page. This means that you can likely omit a lot of the declarations on the children of #child-div by making those properties of #child-div itself (and only overwriting them further down the chain where necessary).

Also, like @kukkuz suggested, if you're trying to apply the same properties to all direct children of #child-div, then you can use #child-div > *.

Bmd
  • 1,308
  • 8
  • 15