CSS Selector - Получить следующий элемент - PullRequest
Новая
       1

CSS Selector - Получить следующий элемент

0 голосов
/ 18 декабря 2018

У меня следующий HTML-код: 

<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Product</div>
        <div class="col-6 comp-value">This product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Test-Category</div>
    </div>
</div>

Я хочу выделить текст This product и Test-Category.Любые предложения, как настроить таргетинг на следующий элемент после Product и Category.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Используйте это .row .col-6:nth-child(even), он выберет и этот продукт, и категорию теста.

0 голосов
/ 18 декабря 2018

Я не уверен, что вы подразумеваете под выбором.Но если вы хотите, чтобы селектор получил к ним доступ, это был бы ответ: 

div.comp-top.col-sm-6 > div> div.col-6.comp-value{
   background-color:grey;
}

Или, альтернативно:

div.comp-top.col-sm-6 > div > div:nth-child(2) с (x), являющимся элементом x на div.

Если вы хотите выбрать оба из них, вы можете использовать (even) для выбора четного элемента на div. 

div.comp-top.col-sm-6 > div > div:nth-child(2){
   color:blue;
}

div.comp-top.col-sm-6 > div > div:nth-child(4){
   color:green;
}

/*div.comp-top.col-sm-6 > div > div:nth-child(even){
   background-color:grey;
}commented code above is to get even element, below to select by comp-value class*/

div.comp-top.col-sm-6 > div> div.col-6.comp-value{
   background-color:grey;
}
<div class="comp-top col-sm-6">
    <div class="row">
        <div class="col-6 comp-stat">Product</div>
        <div class="col-6 comp-value">This product</div>
        <div class="col-6 comp-stat">Category</div>
        <div class="col-6 comp-value">Test-Category</div>
    </div>
</div>

Вы можете проверить здесь для получения дополнительной справки CSS селектор .

...