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 CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

Lefora Williams
Lefora Williams
2,486 Points
Posted by Lefora Williams
Lefora Williams
2,486 Points

Why two div elements with the same class?

Hi guys,

I'm trying to figure out why we used the two div elements with the same container class. We will not be able to style them seperately anyway with the same class right? How does this help later down the line? I'm a bit confused... 

<header class="main-header">
    <div class="container">
      <h1 class="name"><a href="#">Best City Guide</a></h1>
      <ul class="main-nav">
        <li><a href="#">ice cream</a></li>
        <li><a href="#">donuts</a></li>
        <li><a href="#">tea</a></li>
        <li><a href="#">coffee</a></li>
      </ul>
    </div>
    </header>

    <div class="container">
    <h2>Welcome!</h2>
    <p>Everything in this city is worth waiting in line for.</p>
    <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
    <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>

    <h2>Great food</h2>
    <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
</div>

2 Answers

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

You're right. Look at the inside. In the first container you wrote <h1>, <ul>, <li>, <a> contain elements and inside the second container <h2> and <p> contain elements. Now it can be distinguished. If when you are writing a <h1> element within the second container you use the "id" or "class". So you can distinguish the same elements.

Hadassah Davis
Hadassah Davis
1,478 Points
Hadassah Davis
Hadassah Davis
1,478 Points

If you do have to give the <div> tags a separate style then give them separate classes, for example give the first <div> the class "container" and the second <div> the class "second container". But if the two <div> classes are the same it is going to give them the same style. Hope this helps.