CSS target specific class - html

Question

I am attempting to target a specific class which is the first class name inside a div. The attempt I have made looks like the following:
.container-fluid:first-child div.row {
padding-top: 200px;
}
The HTML for the CSS.
<div class="container-fluid">
<div class="row justify-content-md-center"> <<TRYING TO TARGET
<div class="col-3 text-center">
<div class="row">
<img src="/assets/images/fssLogo.png"/>
</div>
</div>
</div>
</div>
As you can see i want to target only the first row inside the container-fluid tag but the padding is also getting applied to the row inside the col-3 class.
Could somone point me in the right direction.

Answer 1

It should be
.container-fluid >.row:first-child {
padding-top: 200px;
}
.container-fluid > .row:first-child {
background-color: red;
padding-top: 200px;
}
.innerRow {
background-color: pink;
}
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-3 text-center">
<div class="row innerRow">
<img src="http://via.placeholder.com/350x150" />
</div>
</div>
</div>
</div>
Or
.container-fluid >.row {
padding-top: 200px;
}
.container-fluid > .row {
background-color: red;
padding-top: 200px;
}
.innerRow {
background-color: pink;
}
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-3 text-center">
<div class="row innerRow">
<img src="http://via.placeholder.com/350x150" />
</div>
</div>
</div>
</div>
But the 2nd snippet is more preferable, it is because you are targeting .row that is the direct child of container-fluid, unless you have another row that is also a direct child of container-fluid, you can use the 1st snippet to only target the first row child.
> is used to target the direct child of a parent, regardless if there is a class that has the same name lower in the hierarchy
.parent > .someClass {
color: blue;
}
<div class="parent">
<p class="someClass">TARGETED</p>
<div>
<p class="someClass">NOT TARGETED</p>
</div>
</div>
Remove > and both text will be blue