There are blocks in which only neighbors (previous and next) of the block with the class .active should be colored red (does not apply to blocks with active !), And all the others to green; at the same time, the number of all blocks may be greater, including active ones, but the latter always go together one after the other and not always in the center. How can I do that? Fidl Conditions: html can not be touched. Ideally, I would like to do without the scripts, but if there is no way without them, then I would like to know that option

 .owl-item { background-color: green; height: 50px; width: 50px; display: inline-block; } .owl-item.active + .owl-item { background-color: red; } 
 <div class="owl-item">first</div> <div class="owl-item active">second</div> <div class="owl-item active">third</div> <div class="owl-item">fourth</div>

Closed due to the fact that the essence of the question is incomprehensible to the participants Grundy , user194374, cheops , Bald , lexxl 4 Aug '16 at 7:26 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • and if two blocks are .active , which ones should be painted? - lexxl
  • What is the expected result for the given example? In general, it is worth adding more markup examples and expected results, now it’s not clear exactly how everything should look in the end - Grundy
  • @lexxl external neighbors to them, do not touch the active blocks themselves - Vasya
  • @Grundy in the answer below is the desired result, but only with the script. if there is a tricky way to css , it will be cool! - Vasya
  • one
    @ Vasya, in the answer below the markup is different from the one given in the question - Grundy

2 answers 2

Pure CSS doesn't do this. Using jQuery Elementally

 $('.active').prev(':not(.active)').css('background-color', 'red'); $('.active').next(':not(.active)').css('background-color', 'red'); 
 .owl-item { background-color: green; height: 50px; width: 50px; display: inline-block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="owl-item">first</div> <div class="owl-item active">second</div> <div class="owl-item active">third</div> <div class="owl-item">fourth</div>

  • but you’ve been swallowing and simplifying the example, for my version this method does not roll .. jsfiddle.net/dmv179cn/1 - Vasya
  • one
    Done exactly according to the statement of the problem: the соседи(предыдущий и последующий) блока с классом .active должны быть окрашены в красный цвет, а все остальные в зеленый . You have two elements with the class active, their neighbors are colored red. Or do you want this to not apply to the elements themselves with the class active? - Sergey Gornostaev
  • Yes, precisely so that it does not spread, otherwise it turns out all the blocks are painted in 1 color. I will add this moment in the description - Vasya
  • Elementary. Corrected the answer. - Sergey Gornostaev

Without scripts, this can not be done, because in CSS there is no selector that defines the previous element. Therefore, this case must be processed by a script, for example:

 [].forEach.call(document.querySelectorAll('.active'), function(active) { var prev = active.previousElementSibling; if (prev && !prev.classList.contains('active')) { prev.classList.add('prev'); } }); 
 .owl-item { background-color: green; height: 50px; width: 50px; display: inline-block; } .owl-item.active + .owl-item:not(.active), .prev { background-color: red; } 
 <div class="owl-item">first</div> <div class="owl-item active">active</div> <div class="owl-item">first</div> <div class="owl-item active">active</div> <div class="owl-item active">active</div> <div class="owl-item active">active</div> <div class="owl-item">first</div> <div class="owl-item active">active</div> <div class="owl-item active">active</div> <div class="owl-item">fourth</div> <div class="owl-item active">active</div> <div class="owl-item">fourth</div> <div class="owl-item">fourth</div> <div class="owl-item">fourth</div> <div class="owl-item">fourth</div>