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 CSS Selectors Selectors - Beyond the Basics DRY CSS

Posted by babasariffodeen
babasariffodeen
6,475 Points

Why don't the borders get applied to all elements within the form element?

At the beginning of this video, Guil sets:

.br { border-radius: 0.5em; }

And we see that the form gets a slight radius. But from my understanding of CSS, anything you apply to a parent element gets applied to the children. So how come I don't see this change get applied on all the input elements too?

Thanks

1 Answer

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi babasariffodeen,

Some CSS stylings will be inherited by the children from the parent elements. e.g. applying a font-size of 2 rem to an unordered list <ul> will be applied to its list items <li>

However, some CSS stylings can not be inherited by the children from their parent. e.g. a border-styling applied to an unordered list <ul> will not be applied to any of its child elements.

The reason why some things are inheritable and some things are not is because to keep things as simple as possible. For example, its likely that a developer want the list items in an unordered list to inherit the font-size. But a developer probably doesn't want them to inherit the border-styling from the <ul>. If they would inherit it the developer would need to write more code to remove the border-styling. It would get annoying quickly.

This article explains it a bit more in depth: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

Hope it helps, Max

babasariffodeen
babasariffodeen
6,475 Points

Thanks Max! Makes more sense now. I can imagine that would be annoying if all styles get passed down.