
Design comparison
Solution retrospective
I am proud of the time that I have carried out the solution
What challenges did you encounter, and how did you overcome them?The challenge was to program the table since I had not done it before but I looked for an html and css page to develop it.
What specific areas of your project would you like help with?I would like to receive recommendations in the area of lists to be able to apply the design in the CSS but also the correct way to use them, if you have other advice it is welcome
Community feedback
- @DangelobastPosted 13 days ago
Good results! Keep going...
Since you asked for some help with your table styling and your second column doesn't have bold text, I will give you two ways and some ideas to solve this:
-
Using :last-child pseudo selector, you can look it up and it's easy to understand but to resume it, it will just select the last child of the element want, for example a CSS selector
tbody td:last-child
will select all the children that are a last-child for the td element, in this case your second column will always be the last child inside your tr element, can be confusing sometimes but just keep in mind it just selects the last child. -
Another way is using nth-of-child(2), which is kind of the same, but you have more possibilities since you can specify a number and can be helpful in more complex situations, so if you set
tbody td:nth-of-child(2)
it will select the second child which is again your second column if you set it to 1 it will select all Calories, Carbs, Protein and Fat because they are the first child (number 1). -
You can also wrap each 277kcal, 0g, 20g,22g in a strong element and it will automatically give it a bolder font weight because it is used to highlight important things in your webpage, the interesting part here is that you can forget about using pseudo classes or any of the stuff before and just select it with
tbody strong
-
You can technically add classes and apply styles.
The right way to style it depends on what you need to do and the complexity of the table, for example if this table was triple the content and you choose to add strong element to the last child then it will be a lot more code and repeating the same thing, with nth-of-child is solved quickly by just setting a number a your are done no matter the size as long as your structure is the same it will always be the 2nd element, and it's a table so it shouln't have a structure problem unless you are doing fancy things, there are more options like selecting odd numbers or even and so.
Hope this helps and gives you an idea on how to use them !
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