I need to mix and merge nth child and last-child, but not nth-last-child

[jhodak]

So I have a group of div boxes, which is variable, it could be as low as 3 or as high as 10. They are set with their widths as 33.33% of their parent. Using nth child I have put borders around them all that will create a 1px border on every box no matter where it falls or how many boxes there are. Since I am using border box, the problem is my last box, the right border is 1px shorter than previous boxes if the row is not full (all 3 boxes).

So to fix this I used Calc to add 1 px to the width, and it works fine. The only problem, is if the last box completes a row, the 1px extra in width breaks it to the next row which also breaks my borders etc. Is there a clever way to select the last child but only if it is 1,2,4,5,7,8, etc?

Here is a JS Fiddle showing my code in a basic sense and the problem, you can also see how if there are more or less boxes this works very nicely!

http://jsfiddle.net/a9x4f1xq/

[Senff]

Maybe you’re looking at things a little too complex. This could be simpler maybe:

• all boxes have a border on the bottom and the right
• parent has a border at the top and left

Then you’ll get something like this: http://jsfiddle.net/senff/u2cm3c5v/1/

Not sure if that’s what you meant to do?

[jhodak]

That does the trick, and obviously more elegant. Thank you :)

[Senff]

Great! The only problem is when the number of boxes is less than 3, cause then the top border is 3 boxes wide, even though there are not 3 boxes.

[jhodak]

In that fringe case I can write javascript to take care of it, but I believe that this is being built to never have less than 3, just the exact number will vary from page to page.

[Author]

Posts