3つの要素から最初の要素と右端から左マージンを削除する

Question

<div id="container"> 
    <div class="element"></div> <!-- remove left margin --> 
    <div class="element"></div> 
    <div class="element"></div> <!-- remove right margin --> 
    <div class="element"></div> <!-- remove left margin --> 
    <div class="element"></div> 
    <div class="element"></div> <!-- remove right margin --> 
    <div class="element"></div> <!-- remove left margin --> 
</div> 

要素の数は可変である必要がありますが、行は3つです。

Answer 1

あなたが探しているのはおそらく:nth-child()-Slectorです。 3番目の要素ごとに左マージンを削除する必要があるとします。

Your example on JSFiddle.

/* remove margin-right from every third child */ 
.element:nth-child(3n) { 
    margin-right: 0; 
} 

Answer 2

.test{ 
 
    display:flex; 
 
    justify-content: space-between; 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
} 
 
.element:nth-child(1) { 
 
    margin-left:0px; 
 
} 
 
.element:nth-child(3) { 
 
    margin-right:0px; 
 
} 
 
.element{ 
 
    height:50px; 
 
    width:150px; 
 
    background-color:pink; 
 
    border: 2px solid black; 
 
}

<div id="container"> 
 
<div class="test"> 
 
    <div class="element"></div> <!-- remove left margin --> 
 
    <div class="element"></div> 
 
    <div class="element"></div> <!-- remove right margin --> 
 
    </div> 
 
<div class="test"> 
 
    <div class="element"></div> <!-- remove left margin --> 
 
    <div class="element"></div> 
 
    <div class="element"></div> <!-- remove right margin --> 
 
    </div> 
 
    <div class="test"> 
 
    <div class="element"></div> <!-- remove left margin --> 
 
    </div> 
 
</div>