環境:Mac Chrome Atomエディタ
※問題は画面幅が767px以下のブラウザ表示の時です。
※質問文は一番下にございます。
※現状のHTML、CSSコードと、例のHTML、CSS計2セット。
『幅767px以下』の時に、一番上の「説明」に、
first-of-typeでmargin指定したのですが、
2番目の「説明」に
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 /*↑2個目以降の要素を指定 */ 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の順番を上げ、詳細度を高めなくては反映されなかったのか? 擬似クラスと詳細度の認識が甘いと思います。
②後半の例のコードですが、何故 こちらは正常に反映されるのでしょうか?
以上、よろしくお願いします。


回答2件
あなたの回答
tips
プレビュー