Nested classes selectors

Question

If I have something like this in my HTML

    <div id="top">
        <div class="txt">
            <span class="welcome">Welcome on my website</span>
            <span class="links"><a href="Home">Home</a></span>
        </div>
    </div>

How I can select the welcome class in my CSS.

I've tried #top.txt.welcome but doesn't work. I've also tried #top.txt span.welcome.

Answer 1

#top .txt is not #top.txt the latter means that the matched element has the id AND the class

Answer 2

div#top div.txt span.welcome

or

#top div.txt .welcome

or some other variation thereof...

Answer 3

You can use

span.welcome
#top .welcome
#top div.txt span.welcome
.welcome

Answer 4

.welcome

#top div.txt .welcome

div#top div.txt span.welcome

it depends on how specific you want to be

Answer 5

#top .txt .welcome{}