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.

greg0ire · Answer 1 · 2016-07-26T21:05:12.683

15

#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

edited Jul 26 '16 at 21:05

answered Jun 25 '10 at 15:47

greg0ire

22,714
16
72
101

Kubain · Answer 2 · 2010-06-25T15:50:49.367

4

You can use


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

edited Jun 25 '10 at 15:50

answered Jun 25 '10 at 15:48

Kubain

56
4

score 2 · Answer 3 · answered Jun 25 '10 at 15:51

2

.welcome

#top div.txt .welcome

div#top div.txt span.welcome

it depends on how specific you want to be

answered Jun 25 '10 at 15:51

Rony

9,331
2
22
22

score 2 · Answer 4 · answered Jun 25 '10 at 15:56

2

#top .txt .welcome{}

answered Jun 25 '10 at 15:56

theorise

7,245
14
46
65

score 1 · Answer 5 · answered Jun 25 '10 at 15:48

1

div#top div.txt span.welcome

or

#top div.txt .welcome

or some other variation thereof...

answered Jun 25 '10 at 15:48

Jim Lamb

25,355
6
42
48

Akshay Donga · Answer 6 · 2022-12-02T11:34:36.313

1

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/

edited Dec 02 '22 at 11:34

answered Feb 21 '17 at 05:36

Akshay Donga

17
6

Nested classes selectors

6 Answers6

Linked