[Solved] Multiple DIV confusion. How to target specific element? - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
July 4, 2014 at 3:11 am #174561
ravinder07
Participant
Hi, I am a beginner and div tag confusing me. I have seen many video where people use multiple div tag to target the same element. For example people use
```
<div class="1"><div class="2"><div class="3"> Some Text Here</p></div></div></div>
```
below is my code :
```
        <html>
<head>
    <title> Html5 and CSS3 Responsive website </title>

<style>
           div.pink {
                background-color:pink;
                margin: 0 auto;
                width:900;
       }      

      div.blue {
             background-color:blue;
             width:800px;
             margin: 0 auto;
       }

        div.red{
                background-color:red;
                margin: 0 auto;
                 width:700px;
       }

</style>
</head>
<body>

       <div class="pink"> <div class="blue"> <div class="red">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                   ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                   laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                   voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div></div></div>

</body>
</html>
```
Now with that code you can see that there are 3 background for the paragraph. What i read before is that the lower value of CSS override the upper CSS style. Am i right? If this case is true then why there are 3 different backgrounds instead of one “red” background. Even if i make the red class div width to 100% it just override the blue class div and still pink color is visible.

If you can give me some tips about using multiple Div tag then it would be a great help for me.
Q. How does web browser see outer div and inner div of a element.
July 4, 2014 at 4:36 am #174571
Paulie_D
Member
I have seen many video where people use multiple div tag to target the same element.

I suspect that you may have misunderstood what they were doing.

With this HTML
```
<div class="pink">
  <div class="blue">
    <div class="red">
      <p>Some text here</p>
        </div>
    </div>
  </div>
```
You have the opportunity to style ** each** div individually because they have handy classes attached.

Now the default background color for a div is..erm..nothing (or transparent).

So, if the first div (.pink) has that background color applied the color will show though all the divs unless a background color is applied to each internal div.

This isn’t the background color of the ‘pink’ div overiding the ‘blue’ or ‘red’ divs…it’s just that their backgrounds are transparent.

http://codepen.io/Paulie-D/pen/yKtgH

Now some properties do get inherited by internal child elements…text color for instance.

See how I defined color on the ‘pink` div? Well, that will apply to all children (and their children) unless told otherwise.
July 4, 2014 at 4:52 am #174577

ravinder07
Participant

Got it thanks.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘CSS’ is closed to new topics and replies.