CSS Selector - Выбрать элемент по тексту предыдущего элемента

Question

Я хотел бы выбрать категорию из нескольких страниц.

У меня есть следующий HTML:

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Rank</div>
        <div class="col-6 comp-value">5</div>
        <div class="col-6 comp-stat">Type</div>
        <div class="col-6 comp-value">Product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Store</div>  
    </div>
</div>

Однако иногда HTML выглядит так:

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Rank</div>
        <div class="col-6 comp-value">5</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Store</div>  
    </div>
</div>

или как это:

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Type</div>
        <div class="col-6 comp-value">Product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Store</div>  
    </div>
</div>

Как вы можете видеть положение изменения категории.Я хотел бы создать селектор CSS, который захватывает текст Store после текста Category.

Есть предложения, как это сделать?

Answer 1

Используйте :last-child селектор для .col-6, например:

.col-6:last-child {
  color: red
}

Или

Это не CSS, но вы можете использовать селектор JQuery :contains для своего решения.

$( ".col-6:contains('Store')" ).css( "text-decoration", "underline" );