CSS CSS Selectors Selectors - Beyond the Basics DRY CSS

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,138 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

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