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
Fernando Ramos
4,369 PointsThe use of .wrapper {} and .wrapper div {} in Positioning Properties style.css file
In the Positioning Properties video I noted that for one of the style.css file .wrapper properties were listed as: .wrapper { box-sizing: border-box; margin: 0 auto; padding: 25px; width: 80%; background: #FFF; position: relative; }
While we had another "wrapper" property that was listed as such: .wrapper div { width: 150px; height: 150px; text-align: center; line-height: 150px; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
I don't recall where the "div" could come after the ".wrapper" such as the second example. I thought the useage would be ".wrapper {}" for the div container and "div.wrapper {}" to define the div boxes (top, middle, bottom) in the examples. I mean, I was able to follow after I looked and the content, but I just didn't recall where the rules in reversing the div and .wrapper were discussed. Any help where I may have missed this or where I can review this would be nice! Thanks!
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Fernando,
I think this is the html in question?
<div class="wrapper">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
.wrapper div is a descendant selector. It's going to select any div's within an element with a class of "wrapper" So it will select the three box div's that are within the wrapper div
For this particular example. .wrapper and div.wrapper will both select that wrapper div. The 1st selector is saying to select any element with a class of "wrapper". and the 2nd selector is saying to select only div's that have a class of "wrapper"
Aurelien Schlumberger
6,127 PointsI haven't done this lesson but
if you do div.wrapper {} or .wrapper the style will be applied to ALL elements with the class .wrapper If you add a child element after .wrapper {} such as .wrapper div , it will apply to ALL <div></div> elements that are children/encapsulated or wrapper in div.wrapper
<!-- No CSS applied -->
<div>Hello</div>
<div class="wrapper">
<!-- delegated CSS style applied -->
<div>World</div>
</div>
Fernando Ramos
4,369 PointsOK makes sense... I sometimes get a little confused when they use a class by itself, like .wrapper without adding the div in front like div.wrapper {}, which seem to work the same either way, so when I saw the swap, .wrapper div {} I guess I was expecting to see a separate property to define the boxes for just div {}. But I did realize the size values for the div boxes was given under .wrapper div {} so I was able to follow, just didn't remember reviewing this in earlier lessons. 8-}
Fernando Ramos
4,369 PointsOK thanks Jason and Aurelien... you both got me squared away!
Fernando Ramos
4,369 PointsFernando Ramos
4,369 PointsHmm... so are you saying that the use in the videos Positioning Properties, I could have defined the the sizing values for the div boxes with the .wrapper class, by either using .wrapper div {} as instructor Guil Hernandez did, as well as suing div.wrapper {}? Hope I made sense. :-O
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsNo,
div.wrapperwill only select the div that has the class "wrapper". It will not select the 3 box div's that are children.To select those you would use
.wrapper divlike Guil did ordiv.wrapper divwould also work but there isn't any point in doing that.Let me know if you have anymore questions.