Alternation blogs in css-CodePudding

I am displaying a list of posts in this order:

left post 1
right post 1 - delete
left post 2 - delete
right post 2
left post 3
right post 3 - delete
left post 4 - delete
right post 4
left post 5
right post 5 - delete
left post 6 - delete
right post 6
left post 7
right post 7 - delete
left post 8 - delete
right post 8
left post 9
right post 9 - delete

I have marked those that should not be displayed

I need to do this kind of check in css

if ($i % 2 === 1) {
left post }
else {
right post }

I tried like this but it didn't work

.post:nth-child(4n 2),
.post:nth-child(4n 3)
{ 
    display: none;
}

html

@foreach ($posts as $post)
    <div class="post-list">
            <div class="post post-left" >
                <h2 class="post_title">{{ $post->title }}</h2>
            </div>

            <div class="post post-right">
                <h2 class="post_title">{{ $post->title }}</h2>
            </div>
    </div>
@endforeach

category html

<div class="category-filter" id="filter">
    <div class="category-filter_item active" data-filter="all">All</div>
    @foreach($categories as $category)
    <div class="category-filter_item" data-filter=".category_{{$category->id}}">{{ $category->title }}</div>
    @endforeach
</div>

JS

document.querySelectorAll('.category-filter_item').forEach(el => {
  el.addEventListener('click', () => {
    document
      .querySelector('.category-filter_item.active')
      .classList.remove('active');
    el.classList.add('active');

      var dataFilter = $(el).attr('data-filter');

      if (dataFilter == 'all') {
        $('.post-list').show();
      }
      else {
        $('.post-list').hide()
        $(dataFilter).show()
      }
  });
});

CodePudding user response：

You can use :nth-child(odd) and :nth-child(even) to select the relevant .post-list container, and then hide the relevant side:

.post-list:nth-child(even) .post-left,
.post-list:nth-child(odd) .post-right {
  display: none;
}

<div class="post-list">
  <div class="post post-left">
    <h2 class="post_title">L1</h2>
  </div>
  <div class="post post-right">
    <h2 class="post_title">R1</h2>
  </div>
</div>
<div class="post-list">
  <div class="post post-left">
    <h2 class="post_title">L2</h2>
  </div>
  <div class="post post-right">
    <h2 class="post_title">R2</h2>
  </div>
</div>
<div class="post-list">
  <div class="post post-left">
    <h2 class="post_title">L3</h2>
  </div>
  <div class="post post-right">
    <h2 class="post_title">R3</h2>
  </div>
</div>

CodePudding user response：

You don't need to create two separate div for left and right posts just make a single div and style that as below

.post { /* right post styling here */ }
.post:nth-child(odd) { /* left post styling here */ }

You can change the left and right position according to your need

.post { 
    background: green;
    text-align: right;
}
.post:nth-child(odd) { 
    background: red; 
    text-align: left;
}

<div class="post-list">
            <div class="post" >
                <h2 class="post_title">post 1</h2>
            </div>

            <div class="post">
                <h2 class="post_title">post 2</h2>
            </div>
              <div class="post">
                <h2 class="post_title">post 3</h2>
            </div>
             <div class="post" >
                <h2 class="post_title">post 4</h2>
            </div>

            <div class="post">
                <h2 class="post_title">post 5</h2>
            </div>
              <div class="post">
                <h2 class="post_title">post 6</h2>
            </div>
    </div>