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

Question

Я пытаюсь выбрать заголовок с помощью селектора CSS.Это мой css

.category-center :nth-last-child(-n+2) {
    color: red;
}

<div class="category-center">
  <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title">
        <a href="" target="_blank">This is awesome title</a>
      </h4>
    </div>
  </div>
</div>

Может кто-нибудь помочь мне с этим?

Answer 1

Вы можете использовать .category-center .post-title a.Он будет нацелен на элемент <a>, который находится внутри элемента с классом post-title, который находится внутри элемента category-center.

Вы можете даже использовать .post-title a, но это нарушит иерархию CSS, которую вы уже использовалиесть для элементов внутри .category-center.Кроме того, он будет тесно связывать HTML с CSS, поэтому в будущем, если вы поместите HTML-код вне .category-center, стили не будут применяться, и вы будете знать, что с этим действием что-то не так.

.category-center .post-title a {
  color: red;
}

<div class="category-center">
  <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
    <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
    <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
</div>

Answer 2

Просто нацеливайтесь на класс, вместо того чтобы вводить определенное число детей, так как это означает, что если вы слегка измените редизайн страницы, он больше не будет работать.

Вы можете либо поместить класс в свой тег, либо настроить таргетинг на любой тег в своем классе h4, как показано ниже.

.post-title a {
  color: red;
}

<div class="category-center">
  <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
</div>