css all divs vs direct child divs
I have this structure:
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
<div>
I want to put borders on the div
s that contain ddddddd
, and I want to set the text color on all div
s to green.
There are two rules:
- I can't add
class
attributes. - I have to write selectors that start with
.Root
.
Any ideas?
Actually I was searching this:
Selects the divs that are direct children of Root:
.Root > div {
border: 1px solid red;
}
Selects all the divs under Root:
.Root div {
color:green;
}
Something like this?
.Root > :first-child, .Root > :last-child { border: 1px solid red }
.Root { color: green; }
Demo: http://jsfiddle.net/karim79/N5qFu/1/
I would advise you to go through this: http://www.w3.org/TR/css3-selectors/