質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

nth-of-child(3) css反映されない

free_teku
free_teku

総合スコア82

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

3回答

-2評価

0クリップ

683閲覧

投稿2021/11/30 08:48

編集2021/11/30 10:50

前提・実現したいこと

.planの3つ目のみ 強調させて少し上へひょっこり抜け出したい

完成

発生している問題・エラーメッセージ

コンパイルされているのに、反応されない

試したこと

scssの&-使い方を確認し、develop toolで確認するも反応してない
自身のcssを確認すると、私が思った通りにコンパイルされている。

nth-of 書き方

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <section class="system"> <section class="table"> <h3>料金表</h3> <div class="conatiner"> <div class="cost-table"> <ul class="table-list"> <li class="table-item"> <div class="plan"> 基礎プラン </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>59,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> <li class="table-item"> <div class="plan"> 演習プラン </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>75,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> <li class="desc-item">月二回の模試(解説付き)</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> <li class="table-item"> <div class="plan"> おすすめ<br> 志望校対策プラン </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>95,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> <li class="desc-item">月二回の模試(解説付き)</li><!-- /.desc-item --> <li class="desc-item">週一の英語面接対策</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> <li class="table-item"> <div class="plan"> フレックス </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>60,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item2">*別途ご相談ください</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> </ul><!-- /.table-list --> </div><!-- /.cost-table --> </div><!-- /.container --> </section><!-- /.table --> </body> </html>

css

.table .container { max-width: 960px; padding: 0px 30px; } .table .cost-table .table-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .table .cost-table .table-list .table-item { width: 200px; height: 475px; border: .5px solid #1B224C; margin-left: 7px; } .table .cost-table .table-list .table-item .plan { display: block; background-color: #1B224C; text-align: center; color: #fff; width: 220px; height: 60px; font-size: 16px; font-weight: bold; line-height: 2; } .table .cost-table .table-list .table-item .plan:nth-child(3) { background-color: #F5A623; width: 200px; height: 96px; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; } .table .cost-table .table-list .table-item .plan:nth-child(3) br { padding-bottom: 19px; } .table .cost-table .table-list .table-item .money h3 { color: #1B224C; font-size: 2.5rem; padding: 30px 0px 14px; margin: 0px; } .table .cost-table .table-list .table-item .money .no-tax { color: #1B224C; padding-bottom: 50px; text-align: center; } .table .cost-table .table-list .table-item .desc-list { padding: 30px 15px 25px 15px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .table .cost-table .table-list .table-item .desc-list .desc-item { padding-bottom: 20px; } .table .cost-table .table-list .table-item .desc-list .desc-item::before { content: ""; display: inline-block; width: 10px; height: 5px; top: 5px; left: -15px; border-left: 3px solid #1b224c; border-bottom: 3px solid #1b224c; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-right: 10px; margin-bottom: 10px; vertical-align: middle; }

追記

CSS

.table .cost-table .table-list .table-item .plan { display: block; background-color: #1B224C; text-align: center; color: #fff; width: 220px; height: 60px; font-size: 16px; font-weight: bold; line-height: 2; } .table .cost-table .table-list .table-item .plan:nth-of-child(3) { background-color: #F5A623; width: 200px; height: 96px; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; } .table .cost-table .table-list .table-item .plan:nth-of-child(3) br { padding-bottom: 19px; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2021/11/30 10:17

>scssの 質問タグつけましょう。 CSSしている人全てがSCSSもしているわけではありません。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。