Impossible to target a class nested inside an ID?

Hello everyone !

I am doing the “Tea Cozy” project of the Front-End Engineer path, and I have a problem that I can’t understand. Here’s the code :

<section id="featured-tea">
            <div class="featured-tea-text">
                <h2>Tea of the month</h2>
                <h4>What's steeping at the Tea Cozy ?</h4>
            </div>
</section>

.featured-tea-text {
      text-align: center;
  }

With this CSS command (or any other that targets the .featured-tea-text class), nothing happens. I can only change something by targeting the ID. Why ?

Thank you !

Antoine.

Try nesting your css and see if it works

#featured-tea .featured-tea-text
{
     //some css
}

No, unfortunately it doesn’t work any better :neutral_face:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #featured-tea {
                color: blue;
            }
            .featured-tea-text {
                color: red;
            }
        </style>
    </head>
    <body>
        <section id="featured-tea">
            <div class="featured-tea-text">
                <h1>hello</h1>
            </div>
        </section>
        
    </body>
</html>

I attempted to replicate your issue and came up short. This code seems to work just fine.
I suggest checking for any spelling errors (although I don’t see any in the code you posted) replicated css classes, id’s and so on.
I will admit that this is a weird bug, but I’m sure there is an explanation for it that will give you an “Aha”-moment.

1 Like

seconded with @vincentb.e

HTML can be weird at times, and usually it relates to the precedence positioning of the styles and stuffs that get colliding with one another.

I’ve ran your code on an online HTML compiler and it shows the correct style settings. Maybe you can check is there something been declared on the higher level? (e.g., css IDs)

Thanks to both of you. I finally asked a graphic designer and developer friend, and thanks to the web inspector he finally noticed that my HTML class command did not appear.

The problem was quite simple : I had not saved my modifications on my HTML code… I was so focused on my CSS code that I forgot to check this.

I presume, vincentb.e, that it is what you call an “Aha”-moment ! :sweat_smile:

Anyway, thank you all !

1 Like