Skip to content
Submitted about 1 year ago

Single price grid component

Kate Dames•250
@funficient
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey, I have one question. Why is my span color not overwriting the transparent class setting? What am I doing wrong?

Here is the section of the CSS I'm referring to:

.transparent {
  color: var(--color--neutral-white);
  opacity: 0.7;
}

.white {
  color: var(--color--neutral-white);
}

span {
  color: var(--color--neutral-white);
  opacity: 1;
  font-size: 2rem;
  font-weight: 800;
}

Any other comments and feedback are welcome!

Thank you :-)

Community feedback

  • Bartosz•240
    @silvertalPosted about 1 year ago

    Hi, I think the problem is that class transparent is more specific than element span. Try writing .transparent span {}

    Marked as helpful
    0
  • danemaas•520
    @danemaasPosted about 1 year ago

    Hi Kate, Good job on completing this challenge!! 👏

    On your question, I think the problem is because you put style opacity on both transparent class and span element. In CSS this can be a conflict, especially when the class transparent is in the parent element of the span which is the p tag. In this case.. instead of using a style opacity on the transparent class.. you could just write this..

    .transparent { color: hsla(0, 0%, 100%, 1, .7); }

    this is an hsla color element with an opacity of .7.. this way. it will not have any conflict on any of its child element. Hope this can help you. Happy coding!! 😁

    Marked as helpful
    0
    Kate Dames•250
    @funficientPosted about 1 year ago

    Thank you @danemaas ! There was indeed a conflict. Thanks so much for your help, it works!

    0

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