Submitted 1 day ago

Recipe page with custom list markers

Sabine• 40

@SabineEmden

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

What specific areas of your project would you like help with?

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

Levi• 90

@law973

Posted 1 day 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 helpful

Sabine• 40

@SabineEmden

Posted about 17 hours ago

Thanks, @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.

Please log in to post a comment

Join 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