CSS Выберите третий соседний элемент - PullRequest
Новая
       7

CSS Выберите третий соседний элемент

2 голосов
/ 19 апреля 2020

Учитывая приведенную ниже структуру html, я пытаюсь выбрать только третьего потомка родителя div на основе уникального атрибута href первого потомка, например a[href*="/view/12345"].

Ограничения:

  1. Я не могу добавить идентификаторы или другие классы к html
  2. Родитель div повторяется на других страницах, но первый дочерний якорь Атрибут href будет уникальным для каждой отдельной страницы 
    <div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">
        <a href="/products/units/view/12345">...</a> 
        <div class="p-4 pb-0">
             <h2 class="text-lg font-semibold">...</h2>
             <div class="mt-4 my_content border-b">
                 ...
             </div>
        </div>
        <div class="flex w-full p-4">
             <div class="flex-none my-auto my_custom_text">
                 STYLE ME GREEN
             </div>
        </div>
    </div>

Я пробовал: 

a[href*="/view/12345"] < div { 
   color: #46845f;}

1 Ответ

1 голос
/ 19 апреля 2020

не нужно учитывать родительский элемент, просто используйте селектор брата , как показано ниже 

a[href*="/view/12345"] + * + div

Это просто выберет следующий div после следующий элемент после вашей ссылки с href. Это будет ваш третий ребенок, учитывая тот факт, что ваша ссылка всегда будет первой. 

a[href*="/view/12345"] + * + div {
  color:green
}
<div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">
  <a href="/products/units/view/12345">...</a>
  <div class="p-4 pb-0">
    <h2 class="text-lg font-semibold">...</h2>
    <div class="mt-4 my_content border-b">
      ...
    </div>
  </div>
  <div class="flex w-full p-4">
    <div class="flex-none my-auto my_custom_text">
      STYLE ME GREEN
    </div>
  </div>
</div>

<div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">
  <a href="/products/units/view/12945">...</a>
  <div class="p-4 pb-0">
    <h2 class="text-lg font-semibold">...</h2>
    <div class="mt-4 my_content border-b">
      ...
    </div>
  </div>
  <div class="flex w-full p-4">
    <div class="flex-none my-auto my_custom_text">
      DON'T STYLE ME
    </div>
  </div>
</div>
...