Chapter 2: Lists and Selector Review
Part 0: Ordered and Unordered Lists
Unordered lists are for a list of things that go in any order. Ordered lists are for a list of things in a specific order, like directions or rankings. You know this already, but there's so much bad code out there, it's worth reviewing, particularly nesting lists to achieve different levels.
Part 1: Selector review
With HTML understood, let's look at the selectors, starting with a review and then branching into more complex selectors that you may not know or remember, including:
- Type selectors, classes, IDs, groups of selectors, descendent selectors
- "Family" combinators: parent-child, adjacent/general sibling selectors
- Attribute selectors
CodePens for this section:
Part 2: Ordered and unordered list styling with pseudoclasses
Now we dig into more interesting pseudoclasses and some incredibly cool tricks for styling list bullets and numbers (also called markers).
Selectors in this section include:
- :first-child, :last-child,:nth-child, :nth-last-child, and similar
- Tricks with list-style-type and ::marker
Part 3: Description lists (formerly definition lists)
Everyone forgets about the amazing and super useful description list, which is for key-value pairs in lists. They're useful for FAQs, terms and definitions, days and hours, and so much more. And now that we can add <div> elements to the list, styling gets even more interesting.
Part 4: Layouts with description lists
Description lists contain one or many <dt> matched to one or many <dd> elements. Use <div> to group these key-value pairs. You may not place <div> elements at any random grouping. This means layouts may be challenging with Flexbox alone. Grid, however, makes things much easier. We'll also introduce the "of-type" pseudoclasses and compare them with the "child" pseudoclasses.
Part 5: Menu lists and navigation lists
The <menu> list is overlooked. Its purpose is to style button groups that offer functions that are NOT links. For example, in an email app, you'd have buttons for reply, forward, delete, etc. These buttons would be marked up using <menu>.
Contrast this with standard <nav> navigation bars containing <ul> unordered lists. Navbars take you to another page via an <a> link. Buttons with <button>, however, are for JavaScript programming and anything else that's not a link.
You Try It: List challenge
Based on everything you've learned so far, mark up this ice cream recipe semantically and style it with CSS. Get your semantic HTML markup in place first. Then move to CSS for styling, adding the minimum number of <div> elements and classes as possible.