Как я могу получить первый совпавший элемент с селектором CSS, у которого разные родители?

Question

Со следующим HTML:

<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>

Я хочу найти первый .something. Как мне это сделать?

Answer 1

Вы не можете достичь этого, используя только CSS. Однако JavaScript s document.querySelector можно использовать для получения первого элемента на странице, соответствующего селектору.

const first = document.querySelector('.something');
first.style.backgroundColor = "dodgerblue";

<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>

Чтобы воздействовать на псевдоэлементы, вы можете добавить класс к элементу, найденному с помощью document.querySelector, и добавить другое объявление стиля в свой CSS.

const first = document.querySelector('.something');
first.classList.add("first");

.something.first:after {
  content: "I'm the first one!";
  color: dodgerblue;
}

<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>

Answer 2

Невозможно достичь этого только с помощью CSS. Это было бы возможно, если бы все элементы с классом .something имели бы одного и того же родителя (см. это решение ). Но поскольку они распределены по нескольким родителям, это не сработает.

Для этого вы можете использовать jQuery, который имеет селектор :first:

$( ".something:first" ).css( "color", "red" );

div, article {
  padding: 1em;
  border: 1px solid silver;
  margin-bottom: 1em;
  width: 100px;
}

span { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span class="something">Something</span>
    <span class="something">Something</span>
    <span class="something">Something</span>
</div>
<article>
    <span class="something">Something</span>
</article>