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

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,294 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

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.