Design comparison
Solution retrospective
I am proud to have completed the challenge. Trying to make it as similar as possible was tricky, but I think I did a good job. I improved my CSS skills.
What challenges did you encounter, and how did you overcome them?My challenges were using local sources and making a responsive design using Media Querys. I researched the subject and learned new things.
What specific areas of your project would you like help with?The last row of the table in the Nutrition section has no bottom border. I tried to bypass it with Pseudo Classes (e.g. table tr:last-child), but couldn't. I opted to use a "no-border" class for the last row, since it is a static table. Any feedback is welcome!!! :)
Community feedback
- @MineshayePosted 6 months ago
Hello! ๐ Great job on completing the challenge successfully! ๐ I wanted to share a suggestion about your code that I think you'll find useful.
-I added a class to the last row of the table, and in CSS, I applied the property "bottom-border: none" to it. Feel free to give it a try yourself as well.
HTML
<tr > <td class="lastrow" > Fat</td> <td class="lastrow" > 22g</td> </tr>
CSS
.lastrow{ border-bottom: none; }
-In the exercise folder, there's a file called "style-guide.md" that outlines all the project specifications, such as colors and font families. This means you won't have to visually assess the style elements.
I hope you find this tip helpful! ๐ Above all, the solution you submitted is great! Keep up the great work, and happy coding!
Marked as helpful0 - @kodan96Posted 6 months ago
hi there! ๐๐
if you wanna style an element's childs except the last one you can use the
.parent-selector .child-selector:not(:last-child)
syntax to extract the last selected child from the selection. Using this should not apply border to the last
tr
hope this helps ๐
Good luck and happy coding!
Marked as helpful0@osenpremaPosted 6 months ago@kodan96 Hello, thanks for your time. I tried what you told me, but it doesn't work for me :(
I did this:
table tr:not(:last-child) { border-bottom: 1px solid hsl(30, 18%, 87%); }
The strange thing is that, if I do this:
table tr:not(:last-child) { background-color: blueviolet; }
Whether to color the background of each row except the last one.
I don't know why it applies other features, except the borders. :(
0@kodan96Posted 6 months ago@osenprema
probably something else overwriting that selector
easiest ways to debug this:
-
look for selectors that have higher
specificity
than this one -
or other selector that has the same specificity but it comes later in your file and overwrites the selector I mentioned
so look for border-related selectors involving your table
0 -
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