Q&A
>scssの
質問タグつけましょう。
CSSしている人全てがSCSSもしているわけではありません。
前提・実現したいこと
.planの3つ目のみ 強調させて少し上へひょっこり抜け出したい
発生している問題・エラーメッセージ
コンパイルされているのに、反応されない
試したこと
scssの＆-使い方を確認し、develop toolで確認するも反応してない
自身のcssを確認すると、私が思った通りにコンパイルされている。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5</head> 6<body> 7 <section class="system"> 8 <section class="table"> 9 <h3>料金表</h3> 10 <div class="conatiner"> 11 <div class="cost-table"> 12 <ul class="table-list"> 13 <li class="table-item"> 14 <div class="plan"> 15 基礎プラン 16 </div><!-- /.plan --> 17 <div class="plan-content"> 18 <div class="money"> 19 <h3>59,000</h3> 20 <p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax --> 21 </div><!-- /.money --> 22 <ul class="desc-list"> 23 <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> 24 <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> 25 <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> 26 </ul><!-- /.desc-list --> 27 </div><!-- /.desc --> 28 </li><!-- /.table-item --> 29 <li class="table-item"> 30 <div class="plan"> 31 演習プラン 32 </div><!-- /.plan --> 33 <div class="plan-content"> 34 <div class="money"> 35 <h3>75,000</h3> 36 <p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax --> 37 </div><!-- /.money --> 38 <ul class="desc-list"> 39 <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> 40 <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> 41 <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> 42 <li class="desc-item">月二回の模試（解説付き）</li><!-- /.desc-item --> 43 </ul><!-- /.desc-list --> 44 </div><!-- /.desc --> 45 </li><!-- /.table-item --> 46 <li class="table-item"> 47 <div class="plan"> 48 おすすめ<br> 49 志望校対策プラン 50 </div><!-- /.plan --> 51 <div class="plan-content"> 52 <div class="money"> 53 <h3>95,000</h3> 54 <p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax --> 55 </div><!-- /.money --> 56 <ul class="desc-list"> 57 <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> 58 <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> 59 <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> 60 <li class="desc-item">月二回の模試（解説付き）</li><!-- /.desc-item --> 61 <li class="desc-item">週一の英語面接対策</li><!-- /.desc-item --> 62 </ul><!-- /.desc-list --> 63 </div><!-- /.desc --> 64 </li><!-- /.table-item --> 65 <li class="table-item"> 66 <div class="plan"> 67 フレックス 68 </div><!-- /.plan --> 69 <div class="plan-content"> 70 <div class="money"> 71 <h3>60,000</h3> 72 <p class="no-tax">*月額（税抜価格）</p><!-- /.no-tax --> 73 </div><!-- /.money --> 74 <ul class="desc-list"> 75 <li class="desc-item2">＊別途ご相談ください</li><!-- /.desc-item --> 76 </ul><!-- /.desc-list --> 77 </div><!-- /.desc --> 78 </li><!-- /.table-item --> 79 </ul><!-- /.table-list --> 80 </div><!-- /.cost-table --> 81 </div><!-- /.container --> 82 </section><!-- /.table --> 83</body> 84</html>
css
1.table .container { 2 max-width: 960px; 3 padding: 0px 30px; 4} 5 6.table .cost-table .table-list { 7 display: -webkit-box; 8 display: -webkit-flex; 9 display: -ms-flexbox; 10 display: flex; 11 -webkit-box-pack: center; 12 -webkit-justify-content: center; 13 -ms-flex-pack: center; 14 justify-content: center; 15 -webkit-box-align: center; 16 -webkit-align-items: center; 17 -ms-flex-align: center; 18 align-items: center; 19} 20 21.table .cost-table .table-list .table-item { 22 width: 200px; 23 height: 475px; 24 border: .5px solid #1B224C; 25 margin-left: 7px; 26} 27 28.table .cost-table .table-list .table-item .plan { 29 display: block; 30 background-color: #1B224C; 31 text-align: center; 32 color: #fff; 33 width: 220px; 34 height: 60px; 35 font-size: 16px; 36 font-weight: bold; 37 line-height: 2; 38} 39 40.table .cost-table .table-list .table-item .plan:nth-child(3) { 41 background-color: #F5A623; 42 width: 200px; 43 height: 96px; 44 padding-top: 20px; 45 padding-bottom: 20px; 46 color: #fff; 47 text-align: center; 48} 49 50.table .cost-table .table-list .table-item .plan:nth-child(3) br { 51 padding-bottom: 19px; 52} 53 54.table .cost-table .table-list .table-item .money h3 { 55 color: #1B224C; 56 font-size: 2.5rem; 57 padding: 30px 0px 14px; 58 margin: 0px; 59} 60 61.table .cost-table .table-list .table-item .money .no-tax { 62 color: #1B224C; 63 padding-bottom: 50px; 64 text-align: center; 65} 66 67.table .cost-table .table-list .table-item .desc-list { 68 padding: 30px 15px 25px 15px; 69 -webkit-box-pack: justify; 70 -webkit-justify-content: space-between; 71 -ms-flex-pack: justify; 72 justify-content: space-between; 73} 74 75.table .cost-table .table-list .table-item .desc-list .desc-item { 76 padding-bottom: 20px; 77} 78 79.table .cost-table .table-list .table-item .desc-list .desc-item::before { 80 content: ""; 81 display: inline-block; 82 width: 10px; 83 height: 5px; 84 top: 5px; 85 left: -15px; 86 border-left: 3px solid #1b224c; 87 border-bottom: 3px solid #1b224c; 88 -webkit-transform: rotate(-45deg); 89 transform: rotate(-45deg); 90 margin-right: 10px; 91 margin-bottom: 10px; 92 vertical-align: middle; 93}
追記
CSS
1 2.table .cost-table .table-list .table-item .plan { 3 display: block; 4 background-color: #1B224C; 5 text-align: center; 6 color: #fff; 7 width: 220px; 8 height: 60px; 9 font-size: 16px; 10 font-weight: bold; 11 line-height: 2; 12} 13 14.table .cost-table .table-list .table-item .plan:nth-of-child(3) { 15 background-color: #F5A623; 16 width: 200px; 17 height: 96px; 18 padding-top: 20px; 19 padding-bottom: 20px; 20 color: #fff; 21 text-align: center; 22} 23 24.table .cost-table .table-list .table-item .plan:nth-of-child(3) br { 25 padding-bottom: 19px; 26}
回答3件
0
ベストアンサー
まず、:nth-of-child() などというセレクタは存在しません。
:nth-child() か :nth-of-type() のどちらかです。
また、:nth-child()は、同じ兄弟要素に対しての順番を指定するものです。
.planには兄弟はいませんので、存在するのは長男(:nth-child(1))のみです。
.table-listの4兄弟のなかの3番目の.table-itemの子供の.planというように考えましょう。
css
1.table .cost-table .table-list .table-item:nth-child(3) > .plan { 2 3}
投稿2021/11/30 12:32
編集2021/11/30 12:36
総合スコア34367
0
nth-of-childは親要素を基準に数えますので、「親要素の中で3つ目の.plan」は1つも存在せず、何ともヒットしません。
投稿2021/11/30 09:00
編集2021/11/30 09:16
総合スコア146659
nth-of-child(3)のうとまちがいでした。失礼しました。打ち直しましたが、反応していません。改めて、ご確認いただいてもよろしいでしょうか？
> 改めて、ご確認いただいてもよろしいでしょうか？
間違いに気づいていなかっただけで、nth-of-childがそのような動作です。
0
.planは一つの要素に対して一つしか存在しません。
.table-itemにnth-child(3)を追加しましょう。
投稿2021/11/30 09:00
総合スコア1426
あなたの回答
tips
プレビュー
