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 class="widget" id="Pagelist2">
    <div class="widget-wrap1">
     <div class="widget-wrap2">
        <div class="widget-content">

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 :


#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 can I use CSS to keep content in its own column?

    How to parse and extract CSS selectors as strings?

    How to use images for check boxes using CSS or may be Javascript?

    How to make sure my css overlay is on top at any site?

    How to create a CSS3 animation that resembles an image fill up effect?

    How to apply CSS to second word in a string?

    How do I change this flipping card to rotate itself onclick?

    how to make a h2 background image 'dynamic' in height as well

    how to wrap a text around a image?

    How do I select all elements of a specific class name?

    How to vertically center inline elements in CSS

    CSS How to create a container with non-linear borders

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to add numbered list style in div tag

    How to display sub sub menu to the left side using CSS?

    How to set css styles with variables in rails if certain item is selected?

    How to change HTML markup structure using javascript or CSS?

    How can I Highlight links only in Blog Posts with Mouseover?

    How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

    How to Get Multiple elements to change color on hover CSS?

    How to make a circle breadcrumb with only css

    CSS how to position element fixed just for y-axis?

    CSS: How to ignore an element so parent's padding will accomodate to other elements?

    How to center this stuff inside a link using CSS?

    how to show line without space in next line when screen gets smaller?

    How to highlight a whole cell when hovering over link

    How can I attach an object to a fixed location on an image?

    How to have multiple css print layouts on a single page application?

    How to set negative z-index with jQuery?

    R markdown: how to change style with internal css?