Q:

CSS child selector depth

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"

A:

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
}

