Design comparison
Solution retrospective
I was able to style the custom markers for the two unordered lists for and the counters for the ordered list.
What challenges did you encounter, and how did you overcome them?For the ordered list, I styled the counters using the ::marker
pseudo-element.
Styling the list markers for the unordered lists was a bit more challenging. In the JPEG design file for the mobile layout, the markers do not sit next to the first line of text but are centered vertically if the text content of the list item wraps over two lines. I used custom markers with the ::before
pseudo-element to position the markers with flexbox.
I'm looking simpler CSS selectors to add the horizontal lines to the nutrition table. This is what I have now:
tr:not(:first-child) td,
tr:not(:first-child) th {
border-top: 1px solid var(--stone-100);
}
Community feedback
- @law973Posted 2 months ago
Looks pretty good!
To add horizontal lines to the nutrition table, I used this in my solution:
tr~tr { border-top: 1px solid var(--stone-150); }
The tilde symbol (~) means that the element on the right side will be styled if it is preceded by the element on the left side. In this case, table rows that have table rows before them will be styled, but table rows that don't have a table row above them won't be, which means that the line won't appear on the top of the table.
There's a handy list here that has information on this selector and others.
(Also good job on the custom unordered list bullets; I found those tricky as well.)
Marked as helpful0@SabineEmdenPosted 2 months agoThanks, @law973! That's the selector I've been looking for. I used the next-sibling combinator (
+
) to add whitespace between the list items but forgot about the subsequent-sibling combinator (~
).I also changed the color of the horizontal lines. I noticed I hadn't used
stone-150
anywhere in my solution.1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord