CODEWITHSUNDEEP
htmlcss
user3091919
user3091919

Reputation: 265

CSS target specific class

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.

Upvotes: 1

Views: 3126

Answers (1)

Carl Binalla
Carl Binalla

Reputation: 5401

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

Upvotes: 5

Related Questions