CSS child selector depth

Question

I have the following HTML code :

<div class="class1">
   <input type="text">
   <input type="text">
   <div class="class2">
       <input type="text">
       <input type="text">
   </div>
</div>

I want all the input fields to have a margin-left : 10px;

I know I can do the following :

.class1 > input {margin-left:10px}
.class1 > .class2 > input {margin-left:10px}

But I was wondering if I could do this with one line of CSS

.class1 >>> input {margin-left:10px}
//>>> meaning "has .class1 in his familly tree"

score 24 · Accepted Answer · edited May 23 '17 at 11:58

24

You can just remove the direct descendant:

.class1 input {
    margin-left:10px
}

Alternatively if you wish to keep the direct descendant then you can have multiple selector rules:

.class1 > input,
.class1 > .class2 > input {
    margin-left:10px
}

edited May 23 '17 at 11:58

Community

1
1

answered Oct 05 '15 at 09:45

Curtis

101,612
66
270
352

score 2 · Answer 2 · answered Oct 05 '15 at 09:46

Here is the way of applying CSS to child elements (for example)-

.class1 input {
 margin-left:15px;
}

.class1 > input {
    background-color:lightgreen;
}

.class1 > .class2 > input {
    background-color:lightblue;
}

<div class="class1">
   <input type="text">
   <input type="text">
   <div class="class2">
       <input type="text">
       <input type="text">
   </div>
</div>

score 2 · Answer 3 · answered Oct 05 '15 at 09:48

CSS selectors are very flexible. for your requirement you can creator a selector as follows.

.class1 input {
    margin-left:10px
}

above selector will select all child input fields within .class1 div. it will also select input fields which are within .class2 as .class2 is also child of .class1

CSS child selector depth

3 Answers3