How can I style the n-th div with CSS


Tags: html,css

Problem :

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



Solution :

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.


    CSS Howto..

    How to get Bootstrap's “hero-unit” to fit across the entirety of top section?

    How do I implement search?

    How to create a image transition hover effect with css without breaking the grid layout

    How to highlight the difference of two texts with css? [closed]

    How to do a 'soft' release of features/refactoring in CSS?

    How do I get a computed style?

    How to convert css into bss

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    css transition effects on show/hide element using css3 [duplicate]

    How can I stop a text link to go up each time it is selected?

    How can I conditionally assign a color to text in jade

    CSS - how to code for a specific resolution

    How to debug CSS when using GWT

    How to give effect on dragging in css or through jquery

    How to add multiple CSS classes to HTML node in Closure template (soy)?

    HTML/CSS how to temporarily highlight a section of a page [duplicate]

    How can I get the
    div to properly wrap my two buttons?

    How to create a css class for category tags?

    how to make the file input field wrap?

    How to auto resize img group with browser change size?

    How can I give a settimeout to a div on first click but not on second click?

    How to disable and enable css rule

    How can I align a div at the edge of a div above it when said div is using automatic positioning?

    How to solve position issue in ie7 using html and css?

    How can I get divs inside a div to continue on a new row when the current row (screen horizontally) is full?

    using css modules how do I define more than one style name

    hover div to show another div

    How dynamically aligning text on website

    How to cancel/disable hover and active effects coming from another CSS library?

    How can i prevent divs from moving while resizing the page