How to selectively add padding for one of the child div without affecting the other-CodePudding

So I have two divs inside a parent div. Something like

 <div className='parent'>
    <div className='child1'>
    <div className='child2'>
 </div>

I want to achieve something like this Sample. How can I add padding only for child2 and not child1. Or is there any other way to do it.

CodePudding user response：

What's the problem? Add margins to .child2.

.parent > div {
  min-height: 50px;
  border: 1px solid black;
}

.child2 {
  margin: 0 50px;
}

<div class='parent'>
    <div class='child1'></div>
    <div class='child2'></div>
 </div>

CodePudding user response：

You can give him a specific id or specific class

<div>1</div>
<div>2</div>
<div id="div3">3</div>
<div>4</div>

and in css

#div3{
color:red;
}

CodePudding user response：

You can select specific child by nth-child selector, without having to assigning class name to each child seperately.

.parent .child:nth-child(2){padding: 10px;}