CSS selectors
I have this piece of html right here
and I am styling it this way
I would like to know if the middle part of my css is an okay way to select children elements, any tips would be appreciated. I am doing it this way to avoid using too many classes for single elements
<section class="how-help">
<div>How can we help?</div>
<div>
<input type="text" placeholder="Search">
<svg> ... </svg> <!-- removed the svg content for space -->
</div>
</section><section class="how-help">
<div>How can we help?</div>
<div>
<input type="text" placeholder="Search">
<svg> ... </svg> <!-- removed the svg content for space -->
</div>
</section>and I am styling it this way
.how-help {
padding: 80px 30px 115px 30px;
background-color: #dadbf1;
text-align: center;
}
.how-help div:first-child {
font-size: 5rem;
margin-bottom: 1rem;
letter-spacing: -4px;
text-wrap: nowrap;
line-height: 120px;
}
.how-help div:nth-child(2) {
display: inline-block;
width: 100%;
max-width: 750px;
position: relative;
}
.how-help div:nth-child(2) svg {
width: 28px;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
.how-help div:nth-child(2):hover svg {
fill: #4C5FD5;
}
.how-help input {
line-height: 32px;
width: 100%;
box-sizing: border-box;
padding: 1rem 1rem;
font-size: 1.25rem;
border-radius: 4px;
outline: none;
border: 1px solid black;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}.how-help {
padding: 80px 30px 115px 30px;
background-color: #dadbf1;
text-align: center;
}
.how-help div:first-child {
font-size: 5rem;
margin-bottom: 1rem;
letter-spacing: -4px;
text-wrap: nowrap;
line-height: 120px;
}
.how-help div:nth-child(2) {
display: inline-block;
width: 100%;
max-width: 750px;
position: relative;
}
.how-help div:nth-child(2) svg {
width: 28px;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
.how-help div:nth-child(2):hover svg {
fill: #4C5FD5;
}
.how-help input {
line-height: 32px;
width: 100%;
box-sizing: border-box;
padding: 1rem 1rem;
font-size: 1.25rem;
border-radius: 4px;
outline: none;
border: 1px solid black;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}I would like to know if the middle part of my css is an okay way to select children elements, any tips would be appreciated. I am doing it this way to avoid using too many classes for single elements
