CSS селектор для класса и атрибута вместе

Question

В настоящее время у меня есть несколько кнопок с классом .continue на веб-странице, структурированным с помощью следующего кода:

<div class="continue" data-section="1">
    Continue
    <i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>

Каждая из кнопок продолжения имеет различные значения «раздела данных», а также размещены на разных фонах на веб-странице.Мне интересно, есть ли способ, которым я могу нацелить одну из этих кнопок продолжения div s, которые имеют определенное значение data-section, и изменить стиль тех, кто соответствует.

Что-то вроде:

.continue:data-section=1{
    //css that styles button with data-section1
}

.continue:data-section=2{
    //css that styles button with data-section2
}

Очевидно, я всегда мог просто дать им разные идентификаторы, но это приводит к большому дублированию кода для анимаций JS и JQuery.

Answer 1

Используйте селектор атрибута:

.continue[data-section="1"] {
    ...
}

Пример:

div {
    width: 100px;
    height: 100px;
    background: blue;
    display: inline-block;
    margin: 5px;
}

.continue[data-section="2"] {
    background: red;
}

/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
    background: yellow;
}

<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>

Подробнее о MDN

Answer 2

.continue:[data-section=1]{
    //css that styles button with data-section1
}

.continue:[data-section=2]{
    //css that styles button with data-section2
}