HTML

<p>This is handy when you have dynamic list content and want to style it differently for a certain number of list items.</p> <h2>Two</h2> <ul> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 1</h3> </li> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 2</h3> </li> </ul> <h2>Three</h2> <ul> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 1</h3> </li> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 2</h3> </li> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 3</h3> </li> </ul> <h2>Four</h2> <ul> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 1</h3> </li> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 2</h3> </li> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 3</h3> </li> <li> <img src="/sandbox/assets/image/cool-dog-bg.png" /> <h3>Cool Dog 4</h3> </li> </ul>

CSS

li { width: 49%; display: inline-block; text-align: center; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33%; }

JavaScript