Home/ Questions/Q 8996559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:46:14+00:00

What I’m trying to do is select every fourth DIV following a heading tag.

  • 0

What I’m trying to do is select every fourth DIV following a heading tag. Here’s a basic idea of the code I’m using.

<div class="view-content"> 

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>

   <h3>The Heading</h3> 
   <div></div>  
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>  
   <div></div>
   <div></div>
   <div></div>
   <div>Trying to select this DIV</div>

</div><!-- .view-content -->

I’m using Drupal, so I’m limited to writing CSS to arrange the content. The reason I’m trying to select every fourth DIV is because there are four DIVs to a row and I want to remove the right margin from the fourth (and last) DIV of a row. Some rows only have one or two DIVs and others have ten or more.

The CSS that I originally wrote (that doesn’t seem to work) is:

div.view-content h3 + div:nth-of-type(4n) {
margin-right: 0px;
}

Maybe I’m overthinking this, or maybe there’s no way to do it. Either way, please help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Unfortunately, it appears there’s no nice, general way to do this with CSS3. Taking some inspiration from the other answer posted here, you can pull it off for a limited number of elements:

    div.view-content h3 + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div,
div.view-content h3 + div+div+div+div + div+div+div+div + div+div+div+div /*etc*/ {
    margin-right: 0px;
}

    http://cssdesk.com/Ty7Gf

    • 0