Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Layout with CSS Grid

@yosephwinata

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Should I use css classes for all elements? In what situations would you target html tags directly instead of using classes?

Community feedback

@BeinRain06

Posted

Good Work Yosep, happy you raise to do this great grid component.

To answer your question:

You don't need to write class for each element of html in order to select them into your style.css file. You can use pseudo-selector E.g: If you want to select the second <p> tag in your div with class price-per-month you might do like following :

.price-per-month >p + p { // some style ... }

And you will get the second <p>per month </p> and could style it without having give it a class name

Class are real on need for container box, button, and tags elements that have a lot of CSS features to add.

Hope I was able to answer your question Winata.

Marked as helpful

0

@yosephwinata

Posted

Thanks for your reply @BeinRain06

0

@BeinRain06

Posted

@yosephwinata You are welcome, Just want to correct one thing, instead of pseudo-selectors in the last post I wanted to mention rather css selector.

You can learn about css selector on w3schools.com

Well hope you an amazing day/night Keep going and happy coding Yosep

0

Please log in to post a comment

Log in with GitHub
Discord logo

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