Выберите элемент с помощью CSS в сложной структуре HTML

Question

Прежде всего, Вот мой HTML

<section class="plans container-fluid">
      <div class="container">
        <h2><img src="img/money.png" class="img-fluid mr-3" />Open A Ira And Get this tax deductables</h2>
        <div class="row">
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Standard</h4>
              <h2>$2000</h2>
              <img src="img/plan1.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Unlimited</h4>
              <h2>$4000</h2>
              <img src="img/plan2.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Platinum</h4>
              <h2>$6500</h2>
              <img src="img/plan3.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
        </div>
      </div>
    </section>

Я хочу выбрать 2-й элемент .plan. Вот CSS я попробовал

.plans .container .row .plan:nth-child(1) {
    background: #f00;
}

Но это не сработало. Это изменило фон всех 3 элементов .plan.

Каков наилучший способ выбора элементов в ситуациях такого типа?

Answer 1

Попробуй это. это сделает вашу работу.

.plans .row > div:nth-child(2) .plan {
 background: red
 }

<section class="plans container-fluid">
      <div class="container">
        <h2><img src="img/money.png" class="img-fluid mr-3" />Open A Ira And Get this tax deductables</h2>
        <div class="row">
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Standard</h4>
              <h2>$2000</h2>
              <img src="img/plan1.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Unlimited</h4>
              <h2>$4000</h2>
              <img src="img/plan2.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Platinum</h4>
              <h2>$6500</h2>
              <img src="img/plan3.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
        </div>
      </div>
    </section>

Answer 2

Вам нужно нацелить элемент div перед каждым div. Это из-за следующей структуры:

Parent
  |-Child 1
  |  |-Child 1
  |-Child 2
  |  |-Child 1
  |-Child 3
  |  |-Child 1

Как видите, .plan не группа в childs

.plans .container .row div:nth-child(2) {
    background: #f00;
}

Hode это помогает

.plans .container .row div:nth-child(2) {
    background: #f00;
}

<section class="plans container-fluid">
      <div class="container">
        <h2><img src="img/money.png" class="img-fluid mr-3" />Open A Ira And Get this tax deductables</h2>
        <div class="row">
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Standard</h4>
              <h2>$2000</h2>
              <img src="img/plan1.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Unlimited</h4>
              <h2>$4000</h2>
              <img src="img/plan2.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Platinum</h4>
              <h2>$6500</h2>
              <img src="img/plan3.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
        </div>
      </div>
    </section>