Получение первого вхождения элемента, независимого от родителей

Question

Я хочу написать селектор CSS, который соответствует первому вхождению элемента с классом «значок». У элементов нет общего родителя (как показано ниже), поэтому псевдо :first-child или :first-of-type у меня не сработали.

HTML-разметка не очень хорошая, но ее спецификация, поэтому изменить ее невозможно.

Есть ли какое-то единственное CSS-решение, соответствующее первому вхождению элемента?

<div>
    <div class="icon"></div> <!-- only this should be matched -->
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>
<div>
    <div class="icon"></div>
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>
<div>
    <div class="icon"></div>
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>

OR

<div>
  <!-- nothing here --> 
</div>
<div>
    <div class="icon"></div>  <!-- only this should be matched -->
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>
<div>
    <div class="icon"></div>
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>

OR

<div>
  <!-- nothing here --> 
</div>
<div>
  <!-- nothing here too -->
</div>
<div>
    <div class="icon"></div>  <!-- only this should be matched -->
    <p class="categoryTitle">Category 1</p>
    <ul>..</ul>
</div>

Answer 1

Нет, нет.Вы должны выяснить, какие из родительских div элементов имеют .icon потомков, в первую очередь, что вы не можете сделать с помощью селекторов CSS.Селектор jQuery .icon:first делает именно то, что вы хотите, но :first не является частью CSS.

Answer 2

Я бы сказал, что для этого вам понадобится какой-то javascript. Я на самом деле только что сделал это на моем собственном проекте.

JQuery:

$('.Icon:first').addClass('myclass'); // or .css('attribute', 'value') depending on what you want.

Вышеуказанный скрипт всегда будет влиять ТОЛЬКО на первое совпадение .Icon, которое он найдет.

Я знаю, что это не CSS, но вы не можете сделать то, что хотите, используя только CSS.