css all divs vs direct child divs

Question

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 divs that contain ddddddd, and I want to set the text color on all divs to green.

There are two rules:

I can't add class attributes.
I have to write selectors that start with .Root.

Any ideas?

@thirtydot: I know how to do it with class attributes so I want to know how to do it without. — Naor, Dec 25 '10 at 02:57

score 112 · Accepted Answer · answered Dec 25 '10 at 03:03

112

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;
}

answered Dec 25 '10 at 03:03

Naor

23,465
48
152
268

Ah, what I understood was, that you wanted borders around only the second and last divs. How wrong I was :) – karim79 Dec 25 '10 at 03:14
I agree that my structure wasn't generic enough. Thank you for your help! – Naor Dec 25 '10 at 03:22

score 11 · Answer 2 · answered Dec 25 '10 at 02:18

11

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/

answered Dec 25 '10 at 02:18

karim79

339,989
67
413
406

score -3 · Answer 3 · answered Dec 25 '10 at 02:12

-3

.root {
border: 1px solid green;
}

Why are you not declaring class /id for other divs?

answered Dec 25 '10 at 02:12

422

5,714
23
83
139

css all divs vs direct child divs

3 Answers3

Linked

Related