Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Multiple DIV confusion. How to target specific element?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #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.

    #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.

    #174577
    ravinder07
    Participant

    Got it thanks.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.