3 Replies - 961 Views - Last Post: 13 June 2013 - 10:48 AM

#1 se7en983  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 20-October 12

Help with multiple CSS selectors on one line

Posted 13 June 2013 - 04:40 AM

Help with multiple CSS selectors on one line

Hi guys, having a little css trouble here.
In my style sheet I have h1, h2, h3, h4, h5, h6 {color:rgb(251,161,0); } which is setting the color of all the headings to orange
In another section of the page I want to set all the heading in a div to white so I tried using #sub_footer h1, h2, h3, h4, h5, h6 {color:rgb(255,255,255); } but this changes all the headings outside of the sub_footer div to, what am I doing wrong?

I know I can use #sub_footer h1{ attribute:value;} #sub_footer h2{attribute:value;} #sub_footer h3{attribute:value;} and so on, but how do I do it on one line?

Thanks in advance for your help.

Is This A Good Question/Topic? 0
  • +

Replies To: Help with multiple CSS selectors on one line

#2 cfoley  Icon User is offline

  • Cabbage
  • member icon

Reputation: 2007
  • View blog
  • Posts: 4,172
  • Joined: 11-December 07

Re: Help with multiple CSS selectors on one line

Posted 13 June 2013 - 07:41 AM

This is a complete guess but it might be worth a try:

#sub_footer h1, #sub_footer h2, #sub_footer h3, #sub_footer h4, #sub_footer h5, #sub_footer h6 {color:rgb(255,255,255); }

Was This Post Helpful? 0
  • +
  • -

#3 se7en983  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 20-October 12

Re: Help with multiple CSS selectors on one line

Posted 13 June 2013 - 10:20 AM

View Postcfoley, on 13 June 2013 - 07:41 AM, said:

This is a complete guess but it might be worth a try:

#sub_footer h1, #sub_footer h2, #sub_footer h3, #sub_footer h4, #sub_footer h5, #sub_footer h6 {color:rgb(255,255,255); }


Thanks for the suggestion!
if i'm going to do it that way i might as well just go..

#sub_footer h1{color:value;}
#sub_footer h2{color:value;}
#sub_footer h3{color:value;}
#sub_footer h4{color:value;}
#sub_footer h5{color:value;}
#sub_footer h6{color:value;}



there has to be a way to target more than one element in a div, this makes sense h1, h2, h3, h4, h5, h6{code} to target all headings on the page so why not #div h1, h2, h3, h4, h5, h6{code} for all element in a div??
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3491
  • View blog
  • Posts: 11,910
  • Joined: 12-December 12

Re: Help with multiple CSS selectors on one line

Posted 13 June 2013 - 10:48 AM

View Postse7en983, on 13 June 2013 - 05:20 PM, said:

#sub_footer h1{color:value;}
#sub_footer h2{color:value;}
#sub_footer h3{color:value;}
#sub_footer h4{color:value;}
#sub_footer h5{color:value;}
#sub_footer h6{color:value;}



there has to be a way to target more than one element in a div, this makes sense h1, h2, h3, h4, h5, h6{code} to target all headings on the page so why not #div h1, h2, h3, h4, h5, h6{code} for all element in a div??

cfoley has provided the correct syntax; your syntax above won't work/is not correct.

Your alternatives are to provide the headings with a class-name. This is what classes are for and it is the most flexible approach. For example, what happens if you take the headings out of #sub_footer, or change the id?

It is unusual to use all 6 headings. Are they really headings? If they are not then you could make some of them DIVs, or Ps (or some other tags) and, again, use class-names.

You could format #sub_footer, let the headings all inherit these rules, and override this rule for other (non-header) elements within sub_footer.

Another option is to consider a css-library such as Sass.

Quote

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. Its translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

This post has been edited by andrewsw: 13 June 2013 - 10:45 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1