Child selector
The child selector is very similar to the descendant selector in CSS except that instead of selecting all descendants (children, grandchildren and so on), it only focuses on direct children.
For a li
element this is particularly useful as it will allow styling of only the list itself -
not sub-lists of the element.
The >
(greater than) symbol is used to represent a child:
CSS
li { font-weight: 100; } .special-list > li{ font-weight: bold; }
HTML
<ul class="special-list"> <li>This is the first element of the list</li> <li>This is the second element of the list</li> <li>This is a nested list <ul> <li>This is a nested element</li> </ul> </li> </ul>
- This is the first element of the list
- This is the second element of the list
-
This is a nested list
- This is a nested element
Did you know my courses are all printer-friendly? This means you can easily export them to PDF or print them for later use.