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"

Answer 1

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
}

Answer 2

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>