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

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)


        
            
                
                    
                        
                            
                        
                        
                            
                                عنوان کتاب
                            
                            نام نویسنده
                            موضوع
                            تاریخ
                        
                    
                
            
        
    

.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?

Debsmita Paul · Accepted Answer

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;
}

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;
}

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

Answers (1)

Related Questions