CODEWITHSUNDEEP
css
Alex
Alex

Reputation: 131

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.

Upvotes: 13

Views: 32903

Answers (6)

Akshay Donga
Akshay Donga

Reputation: 70

If you gonna use 'welcome' class for particular span tag than there are two ways as below...

.txt span.welcome

or

span.welcome

both works fine as CSS class in your code.

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

References:

Upvotes: 1

greg0ire
greg0ire

Reputation: 23265

#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

Upvotes: 15

theorise
theorise

Reputation: 7445

#top .txt .welcome{}

Upvotes: 2

Rony
Rony

Reputation: 9511

.welcome

#top div.txt .welcome

div#top div.txt span.welcome

it depends on how specific you want to be

Upvotes: 2

Kubain
Kubain

Reputation: 56

You can use


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

Upvotes: 4

Jim Lamb
Jim Lamb

Reputation: 25805

div#top div.txt span.welcome

or 

#top div.txt .welcome

or some other variation thereof...

Upvotes: 1

Related Questions