CODEWITHSUNDEEP
htmlcss
Hai Tien
Hai Tien

Reputation: 3117

How can I style the n-th div with CSS

I have design like this :

<body id="layout">
 <div id="section-header">
   <div class="widget" id="Pagelist1">
    <div class="widget-wrap1">
     <div class="widget-wrap2">
        <div class="widget-content">
        </div>
     </div> 
   </div>
   </div>
   <div class="widget" id="Pagelist2">
    <div class="widget-wrap1">
     <div class="widget-wrap2">
        <div class="widget-content">
        </div>
     </div> 
   </div>
   </div>
 </div>
</body>

Requirement: CSS always start with body#layout
How can I style for widget-content class (child of Pagelist2 ID)?
I tried styling like this but its not working:
body#layout > #Pagelist2 > .widget-content {....}

I want to style the class .widget-content

Upvotes: 0

Views: 86

Answers (4)

Anthony Claeys
Anthony Claeys

Reputation: 251

'>' isn't fully supported by some older browsers. So you can drop that.

You might want to specify the full path of the structure.

body#layout #Pagelist2 .widget-wrap1 .widget-wrap1 .widget-content

Or simplify it 

#Pagelist2 .widget-content

Upvotes: -1

Oswaldo Acauan
Oswaldo Acauan

Reputation: 2740

You are using a child selector >.

body#layout > #Pagelist2 > .widget-content

Soo your CSS sets the style of all .widget-content elements that are immediate children of #Pagelist2 who is immediate children of body#layout, but you dont have this chain on your HTML markup.

The selector who you want is

#Pagelist2 .widget-content {...}

But where is my body#layout ?

You dont need it because your page can only have ONE #Pagelist2 to be valid, as you can see in the id selector spec.

Upvotes: 1

Marco Mantovani
Marco Mantovani

Reputation: 77

body#layout > #Pagelist2 > .widget-content {....}

This not work because of ">": it means that #Pagelist2 has to be directly children of body#layout.

body#layout #Pagelist2 .widget-content {...}

This will work

Upvotes: 2

CaribouCode
CaribouCode

Reputation: 14438

Either 

#layout  #Pagelist2 .widget-content {....}

or just 

#Pagelist2 .widget-content {....}

It wasn't working for you because you were using the child selector and #Pagelist2 isn't an immediate child of the body.

Upvotes: 1

Related Questions