Select every 2nd - 1 sibling of specific class with CSS

Question

I have following HTML-markup (or any variations with always two half blocks next to each other)

                   <div class="half_row">
                     <div class="highlight_block full"></div>
                     <div class="highlight_block full"></div>
                     <div class="highlight_block full"></div>
                     <div class="highlight_block half"></div>
                     <div class="highlight_block half"></div>
                     <div class="highlight_block full"></div>
                     <div class="highlight_block half"></div>
                     <div class="highlight_block half"></div>
                     <div class="highlight_block full"></div>
                     <div class="highlight_block full"></div>
                   </div>

The highlight_block's with the class full have a width of 100%. The highlight_block's with the class half have a width of 50%. Now I want to give the first, third, fifth, seventh etc. half block a margin-right (with the full blocks don't getting any margin)

Following CSS doesn't call only the .half highlight blocks:

  .boendgen_grid .half_row .half:nth-of-type(2n-1){
      margin-right: 30px;
    }

How can I call .half highlight_block 1, 3, 5, 7 etc.?

Note that the markup also could begin with 3 full highlight blocks and then be followed by 2 half blocks. (Half_blocks will always turn up in sets of 2).

`The highlight_block's with the class full have a width of 50%.` Do you mean the highlight_blocks with class `half`? — Jared, Nov 04 '16 at 15:04
@PraveenKumar I edited the markup above. I want the first, third, fifth, etc. div with class .half to get the margin (so the full blocks have to be ignored by the CSS) — ALLESxVERBOTEN, Nov 04 '16 at 15:08
@PraveenKumar So every second div with the class half started from the first one (if that makes sense) — ALLESxVERBOTEN, Nov 04 '16 at 15:10
Solved it by using jQuery: $( ".half_row .half:even ").each(function() { $( this ).addClass( "half_highlight_margin" ); }); — ALLESxVERBOTEN, Nov 04 '16 at 15:32

Select every 2nd - 1 sibling of specific class with CSS

0 Answers0