CSS Nested selectors just don't seem to work

Get Help CSS
#1

Hi guys,

So sorry for such a basic question but the lesson and the cheatsheet seem to say I am doing everything correctly as well as videos however there clearly must be something wrong. I am unable to get the nested heading inside of the DIV to change to gray - or any colour.

Please note I am using VS Code and have been able to have all other selectors work except nested.

HTML Code

  <body>

        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br> 
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br> 
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <h3>Lorem ipsum</h3>
        </div>
    </body>

CSS Selector

.description h3 {
    color: blue;
}

I have also tried using div h3 {} as well as using other tags such as

and simply cannot get any nested selectors to work.

I have completed the lesson but when testing in VSCode myself it simply fails to work. Please note I have correctly linked the CSS and HTML files together.

Thank you in advance.

#2

If I put the code in a bin:

JS Bin - Collaborative JavaScript Debugging

seems to work fine. Maybe you have a syntax error somewhere in your css? Did you check the console?

The risk with only posting a small snippet/part of your code, might mean the error is somewhere else and we can not replicate it.

1 Like