Question

Ok so I am going to try and explain this the best I can. I created a widget that will pull in a featured image from the post on the home page based on the category. Right now it pulls in 4 posts. I would like to have the option to pull in 2, 3, 4, or 6 posts. I would also like to change the layout based on how many posts are coming in. Is it possible to only display 2, 3,4, or 6 posts and how would I go about changing the layout based on the number of posts coming in. I was thinking it would refer to a container class in the css for each number of posts or something along the lines of that. Any links, tutorials, or advice would be greatly appreciated!
Thanks,
– Michael

Answer 1

Pure CSS

This provides a CSS3 method to achieve what you want, with a fall back in place for CSS2. Basically, you have a wrapper to target your post items, which will be the only children directly in that wrapper (or, at least the only children of a particular “tag” type, here a div). So something like the following, only the number of children can be 2, 3, 4, or 6 (as you requested).

Simple HTML (this does not have to be div elements; just illustrating)

<div class="postWrapper">
  <div>This is a post</div>
  <div>This is the second post</div>
</div>

Set Default CSS2

For IE7/8, this will be the default display no matter how many posts are being shown in those two browsers, using this selector:

.postWrapper > div { ... }

Set Fancy CSS3

This is doen based on number of posts and will be displayed in all CSS3 browsers. It uses this series of selectors, in this order: (we are using the cascade to our advantage here):

.postWrapper > div:nth-last-of-type(2),
.postWrapper > div:nth-last-of-type(2) ~ div {
   ... your two display css ...
}

.postWrapper > div:nth-last-of-type(3),
.postWrapper > div:nth-last-of-type(3) ~ div {
   ... your three display css ...
}

.postWrapper > div:nth-last-of-type(4),
.postWrapper > div:nth-last-of-type(4) ~ div {
   ... your four display css ...
}

.postWrapper > div:nth-last-of-type(6),
.postWrapper > div:nth-last-of-type(6) ~ div {
   ... your six display css ...
}

What this is doing is utilizing the :nth-last-of-type() selector to “count backwards” through the number of child div’s of the wrapper, apply a style to that div, and then use the general sibling combinator ~ to style all the other div’s in .postWrapper that follow that (theoretical) first div. It does this for the first two using the :nth-last-of-type(2), but then if the wrapper contains three, the next set of selectors that uses :nth-last-of-type(3) overrides the previous (2) selector, and so forth. In this way, through a series of overriding css in the cascade, we change our settings for the number of post elements.

You can see a sample of this technique for illustration purposes in in this fiddle.

NOTE: Because we are using the cascade to override, it is imperative that you make sure to handle any previously set css. In my fiddle example, note how I put a margin on a group of four, but then I removed it on a group of six. If I had mentioned nothing of margin in group six (that is, no overriding), then elements 3-6 (but not 1-2) of the group of six would have had margin still applied based off the previous settings for the group of four.