From 2d5bacd6a04f8222102fb639b1d9f18343ebc3c4 Mon Sep 17 00:00:00 2001 From: Allan W <51011089+ertyertyerty@users.noreply.github.com> Date: Wed, 29 Mar 2023 02:14:50 -0400 Subject: [PATCH] Update child.html 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. Changing it to 'border-bottom' created lines 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 '

' section is within the second '
1. ' field, which itself is a direct child of '
   '. I think a better example would not have the '
   ' section nested within the second link of the '
   ' section, and use a simple 'color: red;' styling. Then, removing the '>' demonstrates direct children vs all children. And fiddling is simplified. --- learn/selectors/child.html | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/learn/selectors/child.html b/learn/selectors/child.html index 72f893d2..bb11bd43 100644 --- a/learn/selectors/child.html +++ b/learn/selectors/child.html @@ -11,7 +11,7 @@ @@ -21,30 +21,28 @@
   • Unordered item
   -
   • Unordered item -
     -
     1. Item 1
     -
     2. Item 2
     -
     -
   +
   • Unordered item
   +
   +
   1. Item 1
   +
   2. Item 2
   +
   ul > li { - border-top: 5px solid red; + color: red; } <ul> <li>Unordered item</li> - <li>Unordered item - <ol> - <li>Item 1</li> - <li>Item 2</li> - </ol> - </li> + <li>Unordered item</li> + <ol> + <li>Item 1</li> + <li>Item 2</li> + </ol> </ul> @@ -54,4 +52,4 @@ - \ No newline at end of file +