how to set CSS style of Multiplication of a number in CSS - html

Question

I make a 6 item column using the PHP loop, and I want to set the third child of each row border to none and I don't want to set the 3times in 2 rows because I want to show the theme center when the page is going smaller.
how to set the border to none for third child of each row(third child, 6th child, and ... 3*rownumber child)
<div class="full-container">
<div class="row">
<?php for($i=0;$i<6;$i++): ?>
<div class="document-item">
<a href="#">
<div class="document-img">
<img src="assets/images/book.jpg" alt="book"/>
</div>
<div class="document-detail text-middlegreen">
<h2>
<span class="parent-position">عنوان کتاب</span>
</h2>
<p>نام نویسنده</p>
<p>موضوع</p>
<p>تاریخ</p>
</div>
</a>
</div>
<?php endfor; ?>
</div>
</div>
.full-container {
width: calc(100% - 40px);
padding: 20px;
}
.row{text-align: center;}
.document-item{
width: calc(33% - 32px);
min-width: 300px;
border-left: 1px solid #5bbcb8;
margin-left: 30px;
display: inline-block;
margin-bottom: 30px;
margin-top: 30px;
}
.document-img{
width: 180px;
display: inline-block;
line-height: 100%;
text-align: center;
}
.document-img img{
width: 80%;
vertical-align: middle;
}
.document-detail{
display: inline-block;
vertical-align: middle;
}
.document-detail> h2{
margin: 10px 0;
}
.document-detail> h2>span{
font-size: 110%;
font-weight: bold;
}
.document-detail> h2>span::before{
content: '';
display: block;
width: 100%;
height: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -2px;
background-color: #5bbcb8;
}
.document-detail> p:first-of-type{
font-size: 90%;
margin: 10px 0;
}
.document-detail> p:nth-last-of-type(2){
font-size: 90%;
margin: 10px 0;
}
.document-detail> p:last-of-type{
font-size: 90%;
margin: 10px 0;
}
is that any way to set multiplication of 3 of each element border to set none in CSS?

Answer 1

You can select every 3rd child using nth-child(3n).
.grid-wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
}
.item {
width: 100%;
height: 50px;
background-color: red;
}
.item:nth-child(3n) {
background-color: blue;
}
<div class="grid-wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
or
You can use nth-child(3n+1) to select every 3rd child including the first one.
Like so:
.grid-wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
}
.item {
width: 100%;
height: 50px;
background-color: red;
}
.item:nth-child(3n+1) {
background-color: blue;
}
<div class="grid-wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>