Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Need some help with CSS selectors

Got a question that should be simple enough but my brain is vapor locking on it.

I am using bootstrap on my site and creating a 1 page layout so I have the following markup (abbreviated)

<!doctype html>
<head>
  head stuff in here...
</head>
<body>
  <div id="home" class="container">
    <div class="row">
      stuff in here
    </div>
  </div>

  <div id="faq" class="container">
    <div class="row">
      stuff in here
    </div>
  </div>

  <div id="about" class="container">
    <div class="row">
      stuff in here
    </div>
  </div>

  <div id="otherstuff" class="container">
    <div class="row">
      stuff in here
    </div>
  </div>
</body>

Usually when using Bootstrap you just have one container class and slide in rows for your content. the CSS for the "container" class is in the bootstrp.css (I can pull it out and post it if you need it).

For one page layouts I have found that it works best creating a container class for each section that would normally be an individual page.

What I am trying to accomplish is a different background color for each container. My brain has abandoned me on this task, any help would be appreciated!!

3 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points

I'm not too familiar with Bootstrap, but I see at least two options. First, style the background through your id's, they are unique so you wont have any issues with the other divs, and I don't think there is a semantic problem with that. The second is to add a second class name to the div's and have your own particular div styles through the second class name. Just a couple of ideas, I hope it helps.

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Thanks for the response Jacob!

Here is the issue with that, The container class is 100% of the width of the page while the row classes are like 80% centered. For some reason when I add background color to the ID it only sets the background to the row.....

I think I am going to have to add a wrapper div outside the container class....div'itus :)

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

Bummer that didn't help, and that's really strange that you can't style by using the id's. yeah, I have no idea, sorry man. I hope you find an answer.

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Actually figured it out! I knew it was going to be a "duh" moment when I did. The container class doesn't fill 100% width, so I just over wrote that in my custom css..bam!

But you actually did help, got my brain un-vapor locked when I started replying to you!

I'll give you the points for the inspiration :D

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

Thanks! glad I could help.