1

Есть код, в котором я добавляю css атрибуты (в моем случае color: red;) после определенного класса class="two" при помощи ~. Можно ли сделать наоборот (если css не подойдет, то можно использовать javascript), что бы атрибуты добавлялись (перебивали существующие) до class="two"?

.main .one {
  color: black;
  display: block;
}

.main .two~.one {
  color: red;
}
<div class="main">
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="two">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
</div>

2

4 ответа 4

2

Вариант с jQuery:

$('.main').children('div').each(function(){ //обходите в цикле дочерние элементы .main
  if($(this).hasClass('two')) { return false; } //если находите элемент с классом two, прерываете цикл
  $(this).css('color','red'); //до этого момента красите элементы красным
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="two">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
</div>

1
1

Раз нужно с JS, тогда можно попробовать так:

let element = document.querySelector(".two");

while (element = element.previousElementSibling) {    
    if (element.className.includes('one')) {        
        element.classList.add('my-red-class');
    }    
}    
.main .one {
  color: black;
  display: block;
}

.main .my-red-class {
    color: red;
}
<div class="main">
  <div class="one">word</div>
  <div class="yo">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="two">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
</div>

0

Нативно через CSS таких операторов нет. Вы можете перевернуть список через flex и column-reverse, тогда этот эффект сработает.

.main {
  display: flex;
  flex-direction: column-reverse;
}

.main .one {
  color: black;
  display: block;
}

.main .two~.one {
  color: red;
}
<div class="main">
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="two">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
</div>

5
  • Спасибо за ответ. Но контент переворачивать это не вариант )) Визуально на примере то да, но это не то решение ) 12 янв 2022 в 11:00
  • Тогда укажите конкретную задачу. Вы в своем вопросе указали её сильно абстрактно, и для вопроса это будет работать. Но контекст знаете только Вы. 12 янв 2022 в 11:01
  • Я в вопросе указала, что бы атрибуты добавлялись до определенного класса, в вашем примере они не добавляются. 12 янв 2022 в 11:11
  • Визуально они добавляются, не визуально явно в CSS так делать нельзя. Соседний ответ тоже неплохой, но так Вы обязаны будете перебивать свойства. Точно ли нельзя решить задачу другими способами не прибегая к таким конструкциям? 12 янв 2022 в 11:14
  • Мне как раз и нужно перебивать свойства, если нельзя сделать при помощи CSS, то js также приветствуется. Именно по этому я тег "js" и поставила 12 янв 2022 в 11:18
0

Как уже сказали, средствами CSS пока так сделать нет возможности.

Но можно сначала элементу установить одни правила, а после нужного класса их переназначить.

.main .one {
  color: black;
  display: block;
}

.main .one {
  color: green;
}

.main .two ~ .one {
  color: red;
}
<div class="main">
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="two">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
  <div class="one">word</div>
</div>

3
  • Спасибо за ответ, но мне нужно добавлять свойства (перебивать существующие). 12 янв 2022 в 11:33
  • Тогда придётся использовать JS
    – De.Minov
    12 янв 2022 в 12:15
  • А вы можете написать? ) 12 янв 2022 в 12:20

Ваш ответ

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

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