Recipe Page using HTML and CSS

Community feedback

• 

  Mine•90

  @MineshayePosted 7 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 helpful

  0
• 

  P

  Koda👹•3,830

  @kodan96Posted 7 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 helpful

  0

  ---

  

  osenprema•170

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

  

  P

  Koda👹•3,830

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