CSS First-child

Question

"Set any content id-labelled element with a first-child descendant element of any of h1, h2, h3, h4, h5, and h6 as follows:"

The selector I've created is found below:

#content:first-child h1,
#content:first-child h2, 
#content:first-child h3, 
#content:first-child h4, 
#content:first-child h5, 
#content:first-child h6 {}

Is this correct? and if so can it be further simplified?

Thanks for the help everyone!

Answer 1

You could add the class="header" to all of your h* tags. So your css now would be

#content:first-child .header { /* whatever */ }

The problem here is that you need to remember to put the class="header" to every tag you need

Answer 2

The description is a little but unclear, but, from what I can understand you want to either

• select those h* elements and then the style would be like:

  #content h1:first-child,
  #content h2:first-child, 
  #content h3:first-child, 
  #content h4:first-child, 
  #content h5:first-child, 
  #content h6:first-child {}
  

Example

• select the #container element itself in case the first child of it is one of h* family. Then you can not achieve this with pure CSS and need to add a simple JS like (using jQuery in this case):

  $('#content').has('h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child');
  

Example