Question

I ran into a problem when trying to style a home page that I am working on. Here is very simple version of what I am doing. http://cdpn.io/kgLzD
I am using wordpress and have the_loop within a div which outputs 8 post with a class of “post”. The problem I am having is styling each post like the picture below because they are divs and have no control over choosing which “post” to style? If I was using a list then I could choose which item to style. Any help/tips/advice to achieving the styles below would be greatly appreciated.

This is where I currently am and as you can see all I basically need are the borders. How would you go about achieving this?

Answer 1

You could use css nth-of-type() selector – since you are floating left and have the div’s two-up, using nth-of-type(2n) would select all of divs on in the right column: (see codepen here: http://cdpn.io/Iacvk)

section.home-grid {
   width:440px; 
}
.post {
  border-top:1px solid #777;
  width: 200px;
  float:left;
  padding: 10px;  
}
.post p {
  padding:.5em 1em;
  width:90%;
  margin:0 auto;
  text-align:justify;
}
.post:nth-of-type(2n) p {
  border-left:2px dotted #777;
}