Bartosz• 240
@silvertal
Posted
Hi, I think the problem is that class transparent is more specific than element span. Try writing .transparent span {}
Marked as helpful
0
Design comparison
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
danemaas• 520
@danemaas
Posted
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
@funficient
Posted
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