css - Add border depending on last elements -

i have parent div#main contains unknown number of divs in rows. every row has 3 divs display: inline-block. now, because of that, last row can contain 1, 2 or 3 divs, depending on number.

if last row has 1 div, want add border-left , border-right it.

if last row has 2 divs, want add border-right first div in row, or border-left second div.

and if last row has 3 divs, want add border-left , border-right to second div (the middle one).

(you'll full picture when @ snipper, or fiddle)

i managed solve issue using js, i'm looking pure css solution, if there one.

$('.main').each(function(){    	var div_length = $(this).find('div').length;    	if((div_length % 3) === 0){  		div_last_items = div_length;  	}    	else if((div_length % 3) === 1){  		div_last_items = div_length - 1;  		$(this).find('div:nth-last-child(1)').addclass('active-borders');  	}    	else if((div_length % 3) === 2){  		div_last_items = div_length - 2;  		$(this).find('div:nth-last-child(2)').addclass('active-border');  	}    	$(this).find('div:lt('+div_last_items+')').each(function(i){  		i=i+2;  		if(i % 3 === 0){  			$(this).addclass('active-borders')	  		}		  	});  });

.main {      width: 360px;      text-align: center;  }  .main>div {      display:inline-block;      vertical-align:top;      width: 100px;      height: 100px;      background:red;      margin-top: 10px;      margin-bottom: 10px;  }  .main>div:nth-child(3n+2) {      margin-left: 20px;      margin-right: 20px;  }    .active-borders{      border-left: 5px solid black;      border-right: 5px solid black;  }    .active-border{      border-right: 5px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="main">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>  </div>  <hr>  <div class="main">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>  </div>  <hr>  <div class="main">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>  </div>

---

jsfiddle

i never thought possible pure css is. credits go this answer showing idea on how achieved. answer based on drafting separate answer because selectors bit different here , wanted explain them.

selector additions:

div > div:nth-child(3n) + div:nth-last-child(1) {   border-left: 5px solid black;   border-right: 5px solid black; } div > div:nth-child(3n+1) + div:nth-last-child(1) {   border-left: 5px solid black; } div > div:nth-child(3n+1) + div:nth-last-child(2) {   border-left: 5px solid black;   border-right: 5px solid black; } 

explanation:

div > div:nth-child(3n) + div:nth-last-child(1)

• select last child of parent div when follows 3n^th child. if last child follows 3n^th child item in last row.

div > div:nth-child(3n+1) + div:nth-last-child(1)

• select last child of parent div when follows 3n+1^th child. if last child follows 3n+1^th child means last row has 2 items.

div > div:nth-child(3n+1) + div:nth-last-child(2)

• select second last child of parent div when follows 3n+1^th child. if second last child follows 3n+1^th child means last row has 3 items.

we cannot use selector div > div:nth-child(3n+2) + div:nth-last-child(1) case last row has 3 items because need middle element styled , not last,

.main {    width: 360px;    text-align: center;  }  .main>div {    display: inline-block;    vertical-align: top;    width: 100px;    height: 100px;    background: red;    margin-top: 10px;    margin-bottom: 10px;  }  .main>div:nth-child(3n+2) {    margin-left: 20px;    margin-right: 20px;  }  div > div:nth-child(3n) + div:nth-last-child(1) {    border-left: 5px solid black;    border-right: 5px solid black;  }  div > div:nth-child(3n+1) + div:nth-last-child(1) {    border-left: 5px solid black;  }  div > div:nth-child(3n+1) + div:nth-last-child(2) {    border-left: 5px solid black;    border-right: 5px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="main">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <hr>  <div class="main">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <hr>  <div class="main">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>

---

the selectors in above snippet adds border-left second div in last row if has 2 items. if need apply border-right first div in last row when has 2 items, can make use of below selector:

div > div:nth-child(3n+1):nth-last-child(2) 

• this means, select second last child of parent div when happens 3n+1^th div. if selector matched, implies last row has 2 items.

.main {    width: 360px;    text-align: center;  }  .main>div {    display: inline-block;    vertical-align: top;    width: 100px;    height: 100px;    background: red;    margin-top: 10px;    margin-bottom: 10px;  }  .main>div:nth-child(3n+2) {    margin-left: 20px;    margin-right: 20px;  }  div > div:nth-child(3n) + div:nth-last-child(1) {    border-left: 5px solid black;    border-right: 5px solid black;  }  /*div > div:nth-child(3n+1) + div:nth-last-child(1) {    border-left: 5px solid black;  }*/  div > div:nth-child(3n+1):nth-last-child(2){    border-right: 5px solid black;  }  div > div:nth-child(3n+1) + div:nth-last-child(2) {    border-left: 5px solid black;    border-right: 5px solid black;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="main">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <hr>  <div class="main">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <hr>  <div class="main">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>