Recipe page with flex and @media

Community feedback

• 

  Dangelo•370

  @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:

  1. 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.

  2. 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).

  3. 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

  4. 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