csscss-selectorsparent-child

Alternative / Less Verbose Way to Write Parent / Child CSS

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.

Solution

  • 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.