Skip to content
Submitted about 4 years ago

Basic design with css flex

Onur Yurtsever•190
@yurtsevero
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there an another way to apply a margin value that does work no matter how many rate boxes are inserted. I selected the second and third rate box to apply a margin-left value (see below) to have this "stair" effect.

.rate-box:nth-child(2) { margin-left: 40px; } .rate-box:nth-child(3) { margin-left: 80px; }

thanks in advance.

Community feedback

  • Dina•460
    @dinakontoPosted about 4 years ago

    Hi Onur,

    Nice work!

    Combining the :not() and :first-of-type pseudo-classes should do the trick. For example: .rate-box:not(:first-of-type) should target every .rate-box EXCEPT the first one.

    Happy coding :)

    1

Please log in to post a comment

Log in with GitHub

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