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

Posted by Mark Lawson
Mark Lawson
6,148 Points

border: none

Around 10:20 into the video he changes 'border: none' to 'border-top: none'. This is targeting the .primary-content and .secondary-content. However, these classes do not have border top. The border top is located in .wildlife and .t-border. How is targeting the top border through .primary-content and .secondary-content able to work. This is just for my sanity!

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Each and every element has a border layer to the Document Object model. Which means that you can target the whole border or just the top in any element. So in border-top, if you set it to "none" it removes the border from just the top border of the "border" layer.

To be clearer each element has

  • margin
  • border
  • padding
  • content

layers in the document object model each of which takes up space in the document and can be controlled using CSS. :-)

.element {
  border-top: none;
}
Mark Lawson
Mark Lawson
6,148 Points

I agree; however, he targeted the border-top:none in the:-

@media (max-width: 768px) { .primary-content, .secondary-content { width: 100%; padding: 20px; border-top: none; }

There are no border-top in these classes in the CSS. The border-top is in .wildlife and .t-border, yet the borders turned off. I do not understand how this is able to work.