私はhtmlの3番目のdivを単に.counter-wrap
のクラスでターゲットにしようとしています。モバイルデバイスの場合、このdivの値はmargin-bottom
です(40ピクセル)。 .counter-wrap
という名前の3番目のスタックdivの余白部分を削除したいと思います。擬似要素を指定した特定の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>
でしょうか? –
与えられた回答に大きな欠点が1つあります。もう1つは、追加の情報として4番目の 'col'を追加したものです。ターゲットにしたいクラスにクラスを設定すると、常に動作します。 – LGSon
はい、私はそれを指摘するための感謝を十分に認識しています。私はもはや 'cols'を追加するつもりはないので、それは良いはずです – rufus