Nested classes selectors

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.

#top .txt is not #top.txt the latter means that the matched element has the id AND the class, while the former means that the matched element has the class, and one of its ancestors element has the id

You can use

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

.welcome

#top div.txt .welcome

div#top div.txt span.welcome

it depends on how specific you want to be

#top .txt .welcome{}

div#top div.txt span.welcome

or

#top div.txt .welcome

or some other variation thereof...

If you want to use that 'welcome' class for perticular span tag than you can use two ways like...

.txt span.welcome

or

span.welcome

It'll works for your CSS class in your code perfectly.

This is the concept of nesting class you can directly refer from references below.

References:

• https://www.w3.org/TR/css-nesting-1/