擬似要素を指定した特定のdiv

Question

私はhtmlの3番目のdivを単に.counter-wrapのクラスでターゲットにしようとしています。モバイルデバイスの場合、このdivの値はmargin-bottomです（40ピクセル）。 .counter-wrapという名前の3番目のスタックdivの余白部分を削除したいと思います。

私は単純に.counter-wrap: last-of-typeを行うことができたと思ったが、これは動作しない理由は、それぞれの.counter-wrapがそれ自身の.colクラスにあるからだと思う。これは擬似要素で行うことができますか、最後の divの一意のIDを使用してただちにmargin-bottom: 0を適用する方が良いでしょうか？

body { 
 
    color: black; 
 
    font-size: 15px; 
 
} 
 

 
.wrap { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.container, 
 
.container-long { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
} 
 

 
.counter-wrap { 
 
    margin-bottom: 40px; 
 
} 
 

 
.counter-text, 
 
.counter-number { 
 
    display: block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: black; 
 
} 
 

 
.counter-text { 
 
    letter-spacing: normal; 
 
    font-weight: 400; 
 
} 
 

 
.counter-number { 
 
    font-size: 60px; 
 
    font-weight: 500; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

使用last-of-typeこのようなcolクラスのセレクター：

.col:last-of-type .counter-wrap { 
    margin-bottom: 0; 
} 

デモは、以下を参照してください：

body { 
 
    color: black; 
 
    font-size: 15px; 
 
} 
 

 
.wrap { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.container, 
 
.container-long { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
} 
 

 
.counter-wrap { 
 
    margin-bottom: 40px; 
 
} 
 

 
/*ADDED*/ 
 
.col:last-of-type .counter-wrap { 
 
    margin-bottom: 0; 
 
} 
 

 
.counter-text, 
 
.counter-number { 
 
    display: block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: black; 
 
} 
 

 
.counter-text { 
 
    letter-spacing: normal; 
 
    font-weight: 400; 
 
} 
 

 
.counter-number { 
 
    font-size: 60px; 
 
    font-weight: 500; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

更新されたコードを確認してください。あなたはこのCSSの残りの部分を更新する必要があります、あなたは望みの結果を得るでしょう。

.wrap .col:last-child .counter-wrap { 
    margin-bottom: 0; 
} 

body { 
 
    color: black; 
 
    font-size: 15px; 
 
} 
 

 
.wrap { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.container, 
 
.container-long { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
.row { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
} 
 

 
.counter-wrap { 
 
    margin-bottom: 40px; 
 
} 
 

 
.counter-text, 
 
.counter-number { 
 
    display: block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: black; 
 
} 
 

 
.counter-text { 
 
    letter-spacing: normal; 
 
    font-weight: 400; 
 
} 
 

 
.counter-number { 
 
    font-size: 60px; 
 
    font-weight: 500; 
 

 
} 
 

 
.wrap .col:last-child .counter-wrap { 
 
    margin-bottom: 0; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
     <div class="col"> 
 
     <div class="counter-wrap"> 
 
      <span class="counter-text">Line1</span> 
 
      <span class="counter-number count">1234</span> 
 
      <span class="counter-text">Line 2</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

nth-child()ルールを使用できます。それを親要素に適用し、対象とする子クラスの番号を入力します。この場合、それはそれはあなたのためによく働いていた場合、あなたがマークし、upvoteしてください可能性があり

.col:nth-child(3) .counter-wrap { 
background:red; 
} 

body { 
 
     color: black; 
 
     font-size: 15px; 
 
    } 
 

 
    .wrap { 
 
     width: 600px; 
 
     margin: 0 auto; 
 
    } 
 

 
    .container, 
 
    .container-long { 
 
     padding-right: 15px; 
 
     padding-left: 15px; 
 
     margin-right: auto; 
 
     margin-left: auto 
 
    } 
 

 
    .row { 
 
     margin-left: -15px; 
 
     margin-right: -15px; 
 
     display: -webkit-box; 
 
     display: -ms-flexbox; 
 
     display: flex; 
 
     -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    } 
 

 
    .col { 
 
     position: relative; 
 
     padding-right: 15px; 
 
     padding-left: 15px; 
 
     -ms-flex-preferred-size: 100%; 
 
     flex-basis: 100%; 
 
    } 
 

 

 
    .counter-wrap { 
 
     margin-bottom: 40px; 
 
    } 
 

 
    .counter-text, 
 
    .counter-number { 
 
     display: block; 
 
     text-align: center; 
 
     text-transform: uppercase; 
 
     color: black; 
 
    } 
 

 
    .counter-text { 
 
     letter-spacing: normal; 
 
     font-weight: 400; 
 
    } 
 

 
    .counter-number { 
 
     font-size: 60px; 
 
     font-weight: 500; 
 

 
    } 
 

 

 
    .col:nth-child(3) .counter-wrap { 
 
     background:red; 
 
    }

<div class="wrap"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div class="col"> 
 
      <div class="counter-wrap"> 
 
       <span class="counter-text">Line1</span> 
 
       <span class="counter-number count">1234</span> 
 
       <span class="counter-text">Line 2</span> 
 
      </div> 
 
      </div> 
 
      <div class="col"> 
 
      <div class="counter-wrap"> 
 
       <span class="counter-text">Line1</span> 
 
       <span class="counter-number count">1234</span> 
 
       <span class="counter-text">Line 2</span> 
 
      </div> 
 
      </div> 
 
      <div class="col"> 
 
      <div class="counter-wrap"> 
 
       <span class="counter-text">Line1</span> 
 
       <span class="counter-number count">1234</span> 
 
       <span class="counter-text">Line 2</span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>