3
<div class="sizes1">
    <div class="size-item">
        1
    </div>
    <div class="more-features1 size-item">
        2
    </div>
    <div class="more-features1 size-item">
        3
    </div>
    <div class="more-features1 size-item">
        4
    </div>
</div>
<style>
    .sizes1 .more-features1:nth-of-type(1) {
        background: green;
    }
</style>

Нужно закрасить блок с контентом 2. В родительском блоке с классом sizes1 ищу первый блок с классом more-features1 и пытаюсь его закрасить. Что делаю не так?

3 ответа 3

2

UPD
То, что Вам надо, на чистом css без "костлей" не сделать. Можно, конечно, придумать такую конструкцию - сначала закрашиваем все элементы с классом .more-features1, а затем для тех, которые идут после первого, отменяем закрашивание.

.more-features1 {
  background: green;
}
.more-features1 ~ .more-features1 {
  background: none;
}
<div class="sizes1">
    <div class="size-item">
        1
    </div>
    <div class="more-features1 size-item">
        2
    </div>
    <div class="more-features1 size-item">
        3
    </div>
    <div class="more-features1 size-item">
        4
    </div>
</div>

Но по мне так это не очень. Уж лучше тогда js использовать:

document.querySelector(.more-features1)

Такой код выберет первый элемент с соответствующим классом.


Потому что элемент идёт не первым, а вторым - в таком случае надо писать :nth-of-type(2)

.sizes1 .more-features1:nth-of-type(2) {
    background: green;
}
<div class="sizes1">
    <div class="size-item">
        1
    </div>
    <div class="more-features1 size-item">
        2
    </div>
    <div class="more-features1 size-item">
        3
    </div>
    <div class="more-features1 size-item">
        4
    </div>
</div>

2
  • Я не знаю какой элемент по счету. Поэтому нужно выбрать первый с соответствующим классом. 4 дек 2019 в 15:07
  • 1
    @ИгорьБаранюк, я обновил ответ 4 дек 2019 в 15:18
2

Логика CSS тут такая: Переставьте, что вы ищете селектором конструкцию у которой есть 2 класса class1 и class2.

<div class="class1 class2"></div>

Селектор при этому будет такой .class1.class2 {}.

В вашем случае есть селектор класса .more-fearutes1, а вместо второго селектора класса у вас селектор типа :nth-of-type(1). Элемент будет выбран селектором .more-features1:nth-of-type(1) только если они оба соответствуют элементу одновременно. Очевидно таких элементов нет, т.к. элементы с классом more-features1 является 2, 3 и 4 по типу.

0

Еще один костыль, кажется работает. Тип елемента сменил где класса нет

<div class="sizes1">
    <span class="size-item">
        1
    </span>
    <div class="more-features1 size-item">
        2
    </div>
    <div class="more-features1 size-item">
        3
    </div>
    <div class="more-features1 size-item">
        4
    </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.