search

mdn / css-examples

Code examples that accompany the MDN CSS documentation
https://developer.mozilla.org/docs/Web/CSS
Creative Commons Zero v1.0 Universal
618 stars 854 forks source link

Update child.html #128

Open ertyertyerty opened 1 year ago

ertyertyerty commented 1 year ago

The example could be improved. While fiddling with the 'border-top' field, changing it to 'border-left' or 'border-right' created a border that ran past ALL four link fields instead of just the first two. Changing it to 'border-bottom' created a border under the first and fourth link fields. Changing 'border-top: 5px solid red;' to a simple 'color: red;' resulted in ALL four links turning red. This is because the '\<ol>' section is within the second '\<li>' field, which itself is a direct child of '\<ul>'.

I think a better example would not have the '\<ol>' section nested within the second link, but rather nested within the '\<ul>' section itself; and use a simple 'color: red;' styling. Then, removing the '>' demonstrates child combinator vs descendant combinator. And fiddling is simplified.

If this commit is accepted, slight changes will also be needed to the text in: 'en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators'

github-actions[bot] commented 8 months ago

This pull request has merge conflicts that must be resolved before it can be merged.