実現したいこと

余白を開けたいです。3つのブロックがあり、それぞれ余白の大きさが違います。
クラス名は追加したくないので、2つ目の.features-boxの下に85px、3つ目の.features-boxの下に135pxマージンを付けたいです。

.features-box:not(:last-of-type ) {
margin-bottom: 85px;}
.features-box:last-of-type {
margin-bottom: 135px;}
とCSSを書いたが85pxの方が優先されてしまいます。

前提

ネットで調べて、last-childは使えないと知り、
:last-of-typeを使用しました。
お分かりの方おられましたらお力添えのほど宜しくお願いします。

該当のソースコード

SCSS
1
2
3.features-ttl {
4    font-size: clamp(24px, 2.8vw, 28px);
5    text-align: center;
6    margin-bottom: 60px;
7}
8
9.features-box {
10    display: flex;
11    flex-direction: column;
12    margin-bottom: 120px;
13
14    &:nth-of-type(3) {
15        margin-bottom: 60px;
16    }
17}
18
19.features-box_main {
20    font-size: clamp(20px, 2.8vw, 24px);
21    line-height: 2;
22    font-weight: bold;
23}
24
25.features-box_sub {
26    font-size: clamp(14px, 2.8vw, 16px);
27    line-height: 1.6;
28    font-weight: bold;
29    margin-top: 30px;
30
31}
32
33.features-box_thumb {
34    margin-top: 40px;
35
36    figure {
37        img {
38            max-width: 100%;
39        }
40    }
41}
42
43.no-blank {
44    display: none;
45}
46
47@include small {
48    .features-box {
49        display: flex;
50        flex-direction: row-reverse;
51        justify-content: space-around;
52        
53    }
54    .features-box:not(:last-of-type ) {
55        margin-bottom: 85px;
56    }
57    .features-box:last-of-type {
58        margin-bottom: 135px;
59    }
60
61    .features-box_body {
62        width: calc((100% - 10px)/2);
63    }
64
65    .features-ttl {
66        margin-top: 0px;
67    }
68
69    .features-box_return {
70        flex-direction: row;
71    }
72
73    .features-box_thumb {
74        margin-top: 0;
75        width: calc((100% - 10px)/2);
76    }
77
78    .features-box_sub {
79        margin-top: 45px;
80    }
81
82    .features-box_sub2 {
83        margin-top: 40px;
84    }
85
86    .features-box_sub3 {
87        margin-top: 30px;
88    }
89}
90
91@include medium {
92
93
94    .no-blank {
95        display: block;
96    }
97
98    .features-box_thumb {
99        height: auto;
100    }
101}
102
103@include large {
104    .features-box {
105        justify-content: space-around;
106    }
107
108    .features-box_body {
109        width: 502px;
110    }
111
112    .features-box_thumb {
113        width: 380px;
114        height: auto;
115    }
116}

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
9    <title>ユアコーディング</title>
10   ediate/css/common.css">
11</head>
12
13<body>
14
15
16            <section class="features element" id="features">
17                <div class="section-inner">
18                  
19
20                    <h3 class="features-ttl element">高速コーディング</h3><!-- /.features-ttl -->
21                    <div class="features-box element">
22                        <div class="features-box_body">
23                            <h4 class="features-box_main">コーディングに特化したフリーランスのため、<br class="no-blank"> スピード感を持った開発が可能。
24                            </h4>
25                            <!-- /.features-box_main -->
26                            <p class="features-box_sub">開発は常にスピードとの勝負です。<br class="no-blank">
27                                ユアコーディングはコーディングに特化しているため、<br class="no-blank">
28                                素早く納品することで、クライアントがデザインに注力<br class="no-blank">
29                                する助けとなります。</p><!-- /.features-box_sub -->
30                        </div><!-- /.features-box_body -->
31                        <div class="features-box_thumb">
32                            <figure><img src="img/cto.png" alt=""></figure>
33                        </div><!-- /.features-box_thumb -->
34                    </div><!-- /.features-box -->
35
36                    <h3 class="features-ttl element">高品質</h3><!-- /.features-ttl -->
37                    <div class="features-box features-box_return element">
38
39                        <div class="features-box_body">
40                            <h4 class="features-box_main">正しいマークアップで、 <br class="no-blank">
41                                内部SEOに強いコーディングを <br class="no-blank"> デフォルトで行います。</h4>
42                            <!-- /.features-box_main -->
43                            <p class="features-box_sub features-box_sub2">ユアコーディングでは、「予測しやすい」「再利用しやすい」<br
44                                    class="no-blank">
45                                「保守しやすい」「拡張しやすい」と言った設計をもとに<br class="no-blank">
46                                きちんとコーディングを行うため、納品後も安心です。</p><!-- /.features-box_sub -->
47                        </div><!-- /.features-box_body -->
48                        <div class="features-box_thumb">
49                            <figure><img src="img/building_website.png" alt=""></figure>
50                        </div><!-- /.features-box_thumb -->
51                    </div><!-- /.features-box -->
52
53                    <h3 class="features-ttl element">迅速なレスポンス</h3><!-- /.features-ttl -->
54                    <div class="features-box features-box_3 element">
55                        <div class="features-box_body">
56                            <h4 class="features-box_main">原則いただいたメッセージは、<br class="no-blank"> 業務時間内であれば6時間以内に<br
57                                    class="no-blank"> お返しいたします。</h4>
58                            <!-- /.features-box_main -->
59                            <p class="features-box_sub features-box_sub3">連絡を返さないフリーランスが多い中、 <br class="no-blank">
60                                ユアコーディングでは定期的な進捗報告など、<br class="no-blank"> 社会人としての基本を踏まえて仕事を行なって<br class="no-blank">
61                                おります。
62                            </p><!-- /.features-box_sub -->
63                        </div><!-- /.features-box_body -->
64                        <div class="features-box_thumb">
65                            <figure><img src="img/new_message.png" alt=""></figure>
66                        </div><!-- /.features-box_thumb -->
67                    </div><!-- /.features-box -->
68
69                </div><!-- /.section-inner -->
70            </section><!-- /.features -->
71</body>
72
73</html>

yambejp

2023/04/21 02:30

冗長な質問になっているのでもっとHTML構成も絞った方がよいでしょう CSSもおそらくSCSSですよね？命題については:last-of-typeを曲解しているだけだと思います

spn

2023/04/21 03:08 編集

コメントありがとうございます。ご指摘の内容を変更させていただきました。理解力が足らず申し訳ないのですが、:last-of-typeを曲解しているとはどういう意味でしょうか。詳しくお聞きしてもよろしいでしょうか。

yambejp

2023/04/21 03:20 編集

回答欄にサンプルをつけておきました :last-of-typeの認識は間違っていませんでしたか？

行動規範の内容に同意します

回答1件

ベストアンサー

.features-box:last-of-type

これは「features-box」クラスの最後の要素ではありません
最後の要素のなかで「features-box」クラスがついているものです。

CSS
1<style>
2.fuga:last-of-type{
3  background-Color:red;
4}
5</style>
6<div class="hoge">
7<div class="fuga">1</div>
8<div class="fuga">2</div>
9<div class="fuga">3</div>
10<div class="fuga">4</div>
11<div class="fuga">5</div> <!-- これがマッチ -->
12</div>
13<hr>
14<div class="hoge">
15<div class="fuga">1</div>
16<div class="fuga">2</div>
17<div class="fuga">3</div>
18<div class="fuga">4</div> <!-- fugaの最後だがdivの最後ではないのでマッチしない -->
19<div>5</div> <!-- 最後のdivがfugaではないのでマッチしない -->
20</div>
21<hr>
22<div class="hoge">
23<div class="fuga">1</div>
24<div class="fuga">2</div>
25<div class="fuga">3</div>
26<div class="fuga">4</div> <!-- 最後のdivでfugaなのでマッチ -->
27<span>5</span>
28</div>
29<hr>
30<div class="hoge">
31<div class="fuga">1</div>
32<span class="fuga">2</span>
33<div class="fuga">3</div>
34<span class="fuga">4</span> <!-- 最後のspanでfugaなのでマッチ -->
35<div class="fuga">5</div> <!-- 最後のdivでfugaなのでマッチ -->
36</div>
37

追記

CSS
1<style>
2h3{
3  background-Color:lime;
4}
5.section-inner,.dummy{
6  background-Color:gray;
7  height:fit-content;
8}
9.features-box{
10background-Color:yellow;
11}
12.features-box:not(:last-of-type ) {
13margin-bottom: 85px;
14}
15.features-box:last-of-type{
16margin-bottom: 135px;
17}
18</style>
19<div class="section-inner">
20<h3 class="features-ttl element">高速コーディング</h3>
21<div class="features-box element">test1</div>
22<h3 class="features-ttl element">高品質</h3>
23<div class="features-box features-box_return element">test2</div>
24<h3 class="features-ttl element">迅速なレスポンス</h3>
25<div class="features-box features-box_3 element">test3</div>
26</div>
27<div class="dummny">dummy</div>

投稿2023/04/21 03:13

編集2023/04/21 09:02

yambejp

総合スコア114839

spn

2023/04/21 08:39

ご丁寧でわかりやすい説明ありがとうございます。私の理解力が足らず申し訳ないのですが、質問させてください。 <div class="section-inner"> <h3> <div class="features-box"></div> <h3> <div class="features-box"></div> <h3> <div class="features-box"></div> </div> HTMLを簡略して書く上記のようになっていると思うのですが、 3番目のfeatures-boxは:last-of-typeではないのですか。 section-innerの最後のdivだと思うのですがどう間違っているのか理解ができていません。。。