first-of-typeが効かない原因&擬似クラスの詳細度について

環境：Mac　Chrome　Atomエディタ
※問題は画面幅が767px以下のブラウザ表示の時です。
※質問文は一番下にございます。
※現状のHTML、CSSコードと、例のHTML、CSS計2セット。

『幅767px以下』の時に、一番上の「説明」に、
first-of-typeでmargin指定したのですが、
２番目の「説明」に
nth-child(n+2)でmargin指定をすると、一番上のmargin指定が無効化されてしまう。

CODE

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>テスト用</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
9    <link rel="stylesheet" href="css/test.css">
10  </head>
11  <body>
12  <!--=============テストスペース============================  -->
13  <div class="attend">
14    <h2><i class="fas fa-dog"></i>タイトル</h2>
15      <img src="img/attend.jpg" class="attend-image">
16
17    <div class="attend-contents">
18      <div class="attend-icon">
19        <img src="img/skypeconsulting.png">
20        <p>説明</p>
21      </div>
22      <div class="attend-text min-768">
23        <p>テキストテキストテキストテキスト</p>
24        </div>
25      </div>
26    <img src="img/flowline1.png" class="kakukaku min-768">
27    <div class="attend-contents">
28      <div class="attend-icon">
29        <img src="img/preworks.png">
30        <p>説明</p>
31      </div>
32      <div class="attend-text min-768">
33        <pテキストテキストテキストテキスト</p>
34      </div>
35    </div>
36  <img src="img/flowline2.png" class="kakukaku min-768">
37    <div class="attend-contents">
38      <div class="attend-icon">
39        <img src="img/flight.png">
40        <p>説明</p>
41      </div>
42      <div class="attend-text min-768">
43        <p>テキストテキストテキストテキスト</p>
44      </div>
45    </div>
46  <img src="img/flowline1.png" class="kakukaku min-768">
47    <div class="attend-contents">
48      <div class="attend-icon">
49        <img src="img/personwithlight.png">
50        <p>説明</p>
51      </div>
52      <div class="attend-text min-768">
53        <p>テキストテキストテキストテキスト</p>
54      </div>
55    </div>
56  <img src="img/flowline2.png" class="kakukaku min-768">
57    <div class="attend-contents">
58      <div class="attend-icon">
59        <img src="img/jobsupport.png">
60        <p>説明</p>
61      </div>
62      <div class="attend-text min-768">
63        <p>テキストテキストテキストテキスト</p>
64      </div>
65    </div>
66  </div>
67
68
69
70
71
72
73<!--=====テスト=======================  -->
74      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
75      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
76      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
77  </body>
78</html>
79

CSS
1body{
2  margin: 0;
3}
4img{
5  display:none;
6}
7.attend{
8  padding: 60px 0 35px;
9}
10.attend h2{
11  text-align: center;
12}
13.attend-image{
14  width: 80%;
15  margin: 45px auto 30px;
16  display: block;
17}
18.attend-contents{
19  display: flex;
20  justify-content: space-between;
21  padding: 30px 30px 20px 80px;
22  width: 95%;
23  margin: 0 auto;
24  background-color: #FEF5E0;
25  border-radius: 4px;
26  letter-spacing: 2px;
27  font-weight: bold;
28}
29.attend-icon {
30  width: 15%;
31}
32.attend-icon img{
33  display: block;
34  margin: 0 auto;
35}
36.attend-icon p{
37  font-size: 18px;
38  text-align: center;
39  margin-top: 20px;
40}
41.attend-text{
42  width: 80%;
43}
44.kakukaku{
45  display: block;
46  width: 60%;
47  margin: 0 auto;
48}
49
50@media (max-width:767px) {
51  h2{
52    font-size: 18px;
53  }
54  .min-768{
55    display: none;
56  }
57  .attend-image{
58    display: none;
59  }
60  .attend-contents{
61    flex-direction: column;
62    padding:10px;
63  }
64  .attend-contents:first-of-type{
65    margin-top: 50px;
66  }
67  .attend-contents:nth-child(n+2){
68    margin-top: 5px;
69  }
70  /*↑２個目以降の要素を指定  */
71  .attend-icon {
72    width: 100%;
73    display: flex;
74    align-items: center;
75  }
76  .attend-icon img{
77    display: block;
78    margin: 0;
79    width: 35px;
80    height: 35px;
81  }
82  .attend-icon p{
83    text-align: left;
84    font-size: 15px;
85    margin: 0 0 0 20px;
86  }
87  .attend-text{
88    width: 100%;
89  }
90}
91

TRY

このCSSの該当箇所を下記のように変更すると、

  .attend-contents:first-of-type{
    margin-top: 50px !important;
  }

一番上の「説明」のmargin-top: 50px　が正常に反映されます。

また、

  .attend-contents:nth-child(n+2){
    margin-top: 5px;
  }
  .attend-contents:first-of-type{
    margin-top: 50px ;
  }

このように順番を入れ替えても正常に反映される事が確認できました。
この状況から察するに、恐らく何らかの詳細度が関係しているのでは思ったのですが、
その"原因"、"理由"がわからないのです。

何故わからないのかと言うと、
最初のcssコードのnth-child(n+2)とnth-child(n+2)の記載順が同じ例の場合、
正常に反映されてしまったからです。

その例はコチラ↓（※これに関しては、画面幅は関係ありません）

HTML
1 <div class="attend-contents">
2    <p>テキストテキストテキストテキスト</p>
3    <p>テキストテキストテキストテキスト</p>
4  </div>
5  <img src="img/flowline1.png" class="kakukaku">
6  <div class="attend-contents">
7    <p>テキストテキストテキストテキスト</p>
8    <p>テキストテキストテキストテキスト</p>
9  </div>
10  <img src="img/flowline1.png" class="kakukaku">
11  <div class="attend-contents">
12    <p>テキストテキストテキストテキスト</p>
13    <p>テキストテキストテキストテキスト</p>
14  </div>
15  <img src="img/flowline1.png" class="kakukaku">
16  <div class="attend-contents">
17    <p>テキストテキストテキストテキスト</p>
18    <p>テキストテキストテキストテキスト</p>
19  </div>
20  <img src="img/flowline1.png" class="kakukaku">
21  <div class="attend-contents">
22    <p>テキストテキストテキストテキスト</p>
23    <p>テキストテキストテキストテキスト</p>
24  </div>

CSS
1img{
2  display:none;
3}
4p {
5  margin: 0
6}
7.attend-contents{
8  background-color: lightgreen;
9  border-radius: 3px;
10  text-align: center;
11  width: 60%;
12  margin: 0 auto;
13}
14.attend-contents:first-of-type{
15  margin-top: 50px;
16}
17.attend-contents:nth-child(n+2){
18  margin-top: 5px;
19}

Question

①前半のコードですが、何故　!important　をつけたり、cssの順番を上げ、詳細度を高めなくては反映されなかったのか？　擬似クラスと詳細度の認識が甘いと思います。

②後半の例のコードですが、何故　こちらは正常に反映されるのでしょうか？

以上、よろしくお願いします。

aKusano

2019/04/23 01:23

タイトルの下にある「<img src="img/attend.jpg" class="attend-image">」がキャプチャでは見当たらないように思われるのですが、これどこいきました？現状のソースコードに実際にこの画像が入ってるのか入ってないのか確認してください。

aKusano

2019/04/23 01:26

タイトルのh2の下にimgがあるのか無いのかで、その下に続く.attend-contentsの数え方にも影響が出てくるので、そこ大事です。

退会済みユーザー

2019/04/23 04:18 編集

見当たらないとはどう言う事でしょう？コードからもわかります通り、 .attend-image{ display: none; } これで、767px以下のmediaクエリで <img src="img/attend.jpg" class="attend-image"> コレを消してますよね？「そこ大事」とは果たしてこの事を言っているのでしょうか？ソースをそのままコピペすればわかるかと思いますが...。

aKusano

2019/04/23 06:35

あー、cssで消してましたね。失礼しました。 HTML上にはあるけど、CSSでdisplay:noneで表示はさせていない状態である、と。了解です。

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

回答2件

ベストアンサー

おそらくですが、まず　〜child　と　〜of-type　の違いについて正しく認識できてない可能性があるように見受けられます。

〜child　は、ある親要素の直下に並列で存在する子要素について、
要素の種類に関係なく上から順番に1、2、3、4、5、、、、と通し番号を割り振ります。
その上で、:first-childなら1番最初、:last-childなら1番最後、
:nth-child(n)ならn番目、とカウントして要素を選択していきます。
例えばこうです。

HTML
1<div> ←カウント開始の基準となる親要素
2  <h2>xxx</h2> ← 1
3  <img> ← 2
4  <div>xxx</div> ← 3
5  <img> ← 4
6  <div>xxx</div> ← 5
7  <img> ← 6
8  <div>xxx</div> ← 7
9</div>

これに対して、〜of-type　は、ある要素の直下に並列で存在する子要素について、
要素の種類ごとにそれぞれ連番を振っていきます。
したがって数え方はこうなります。

HTML
1<div> ←カウント開始の基準となる親要素
2  <h2>xxx</h2> ← h2-1
3  <img> ← img-1
4  <div>xxx</div> ← div-1
5  <img> ← img-2
6  <div>xxx</div> ← div-2
7  <img> ← img-3
8  <div>xxx</div> ← div-4
9</div>

以上をふまえて質問者さんのコードを見てみると、
まず.attend-contents:first-of-typeについては、質問者さんの思っている通り、
「説明1」のボックスを選択できています。このボックスが親要素である.attendから見て
.attend-contensと名のついた最初のdiv要素（div:first-of-type）だからです。

ところが、.attend-contents:nth-child(n+2) は質問者さんが思っているのとは違い、
「説明1」〜「説明5」まで全てが該当してしまっています。
理由は、:nth-child(n)は親要素からみて要素の種類を問わず全ての子要素に対して一律に振った連番を基準としてカウントするものだからです。
今回場合、2番目の子要素、つまり:nth-child(2)はh2タイトルの下にあるimg要素です。そして今回のセレクタ:nth-child(n+2)は、
2番目の子要素以下全部が該当し、そのうち.attend-contentsというclassがついたものに対してスタイルが適用された状態となっています。

このような状態となっているため、

CSS
1.attend-contents:first-of-type{
2    margin-top: 50px !important;
3}

や

CSS
1  .attend-contents:nth-child(n+2){
2    margin-top: 5px;
3  }
4  .attend-contents:first-of-type{
5    margin-top: 50px ;
6  }

のように記述すればmargin-top:50pxが有効になるのはCSSの上書きルールからして当然の結果であると言えます。

ちなみにこれは私も今回改めて確認したことなのですが、HTML上に記述されている要素については、たとえCSSでdisplay:none;としていても :nth-childのカウント対象のままであり、非表示要素も含めて連番が振られてしまう仕様のようです。この辺がまた勘違いの原因の1つにもなっていると思います。（ややこしいですよね）

というわけで、質問者さんの疑問点に答えるとすると、以下のようになるかと思います。

①前半のコードですが、何故　!important　をつけたり、cssの順番を上げ、詳細度を高めなくては反映されなかったのか？

同じ要素に対して同じ詳細度のセレクタを複数書いたら、後から書いたほうで上書きされる当たり前のCSSの挙動となっているだけ。 !importantを使って詳細度最優先にした場合も同じ。仕様どおりの挙動です。

②後半の例のコードですが、何故　こちらは正常に反映されるのでしょうか？

1つ目の例とはHTMLの構造が異なるため、:nth-child(n+2) が「説明2」以下のdivに対して有効となっているから。

です。

今回の問題は、〜child と〜of-type の仕様の違いをよく理解しないまま:nth-child(n+2) を使ってしまったことにあるかと思います。
作りたいデザインを最もシンプルに作るのであれば、

CSS
1  .attend-contents{
2    margin-top: 5px;
3  }
4  .attend-contents:first-of-type{
5    margin-top: 50px;
6  }

このように一旦全ての.attend-contentsにmargin-topをつけておいてから、最初の1つにだけmargin-top: 50pxを上書きするのがいいかと思いますので参考にしてください。

投稿2019/04/23 07:32

編集2019/04/23 07:41

aKusano

総合スコア3763

退会済みユーザー

2019/04/23 10:03

まず、ありがとうございます。やっと原因が把握できました。完全に見落としだったと思います。私の認識では、・nth-child は『同じ階層にある要素の内、何番目を』指定。・nth-of-type は『同じ階層に並んでいる要素の同じ種類の要素の内、何番目を』指定。 ↑このような認識です。（あってるはず）ですが、今回 display:noneで画像を非表示にしてたのもそうですが、そもそも、(n+2)の数字が間違えていました。 nth-childは『同じ階層にある要素の内、何番目を...』なので .attend-contents:nth-child(n+4){ margin-top: 5px; } ↑こうやればうまくいきました。一番上の　attend-contents　より上の要素２つ（h2とimg）が同じ階層だった事に全く気づきもしませんでした。←これが最大の原因完全に頭の中では、同階層の一番上は　attend-contents　だと思いこんでいました。それと、 >これに対して、〜of-type... このコードで、 <div>xxx</div> ← div-4 このような記載がありますがこれは、 4ではなくて、div-3ではないのでしょうか？ミスだったら良いのですが、これが3で正しいとなると結構混乱する可能性あるので。

aKusano

2019/04/23 12:24

> 4ではなくて、div-3ではないのでしょうか？あ、そうですね。ここはdiv-3の間違いです（汗）そのように読み替えてください。 > 一番上の　attend-contents　より上の要素２つ（h2とimg）が同じ階層だった事に全く気づきもしませんでした。←これが最大の原因一旦思い込むと単純なミスほどなかなか気づかないんですよねー。あるあるです。ともかく理解できたようで何よりです。

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

2つ目の例は.attend-contents:first-of-typeが.attend-contents:nth-child(n+2)では無いだけです。
（ n+2 は2個目の要素からはじまるので）

デベロッパーツールで状況を確認してみてください。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【:nth-child() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child#Example_selectors

投稿2019/04/22 18:35

kei344

総合スコア69398

退会済みユーザー

2019/04/22 18:54 編集

>2つ目の例は.attend-contents:first-of-typeが.attend-contents:nth-child(n+2)では無いだけです。すいません、この言葉の意味が理解できません、「では無いだけ」とはどう言う意味でしょうか？また、デベロッパーツールは常に確認してます。（それでもわからないのですが） n+2　も「２以降の要素」と言う意味も理解しています。 ①と②の回答を頂ければ幸いです。また、「①と②の回答云々の前に...」と言う事でありましたら、何が間違っているのでしょうか。根本的に大きな勘違いをしているのでしょうか？

kei344

2019/04/22 19:02

[ 1つ目の例 ] 1 h2 2 img ← :nth-child(0+2) 3 div.attend-contents ← :nth-child(1+2), .attend-contents:first-of-type 4 img ← :nth-child(2+2) 5 div.attend-contents ← :nth-child(3+2) [ 2つ目の例 ] 1 div.attend-contents ← .attend-contents:first-of-type 2 img ← :nth-child(0+2) 3 div.attend-contents ← :nth-child(1+2) 4 img ← :nth-child(2+2) 5 div.attend-contents ← :nth-child(3+2) 【:nth-child() - CSS: カスケーディングスタイルシート | MDN】 https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child#Functional_notation > <An+B> > 一連の兄弟要素の中で、 n に正の整数か0が入るとき、 An+B のパターンに一致する位置の要素を表します。

退会済みユーザー

2019/04/22 19:14

パッと見でイマイチ理解できなかった為、今頂いた回答をもう一度見直し、今日の日中にはご返信します。

退会済みユーザー

2019/04/23 04:36

すいません。何度も見返していますが（MDN含め）、まるで何を伝えたいのかがサッパリわかりません。 >3 div.attend-contents ← :nth-child(1+2), .attend-contents:first-of-type ↑この意味も全く「何をどう伝えて頂いてるのか、伝えたいのか」が全く理解できませんでした。質問は、 .attend-contents:first-of-type と .attend-contents:nth-child(n+2) ↑『この記載順が原因かと思ったのにも関わらず、同じ記載順でも正常に反映されるケースがあるのは”何故”なのか』です。よろしくお願いします。

kei344

2019/04/23 04:39

> 同じ記載順でも正常に反映されるケースがあるのは”何故”なのかそれを検証するためのHTML（1つ目の例、2つ目の例）が構造として違うから。

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

あなたの回答