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

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

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

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

HTML5

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

538閲覧

cssでnth-of-type(even)がきかないので教えてください。

oyu

総合スコア48

CSS3

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

HTML5

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2020/10/01 22:38

前提・実現したいこと

cssで奇数の2番目のsec07__boxをnth-of-type(even)で指定していますが。
反映されません。
どのように指定すれば反映されるのでしょうか?
詳しい方、教えてください。

該当のソースコード

html

1 <div class="sec07__box"> 2 <div class="contents__text"> 3 <h2 class="contents__title"> 4 朝、起きたときもしっとり! 5 </h2> 6 <div class="contents__about"> 7 朝、起きた時も以前はパリパリだった<br>のが、今はしっとり!!<br> 8 乾燥したら、お化粧の上からもつけら<br>れるので、大変肌が喜んでいます。 9 </div> 10 <p class="contents__name"> 11 AKSさま(62歳)愛用歴:1ヶ月 12 </p> 13 </div> 14 <figure class="thumbnail__img"> 15 <img src="./assets/images/pc/thumbnail01.jpg" alt=""> 16 </figure> 17 </div> 18 19 <div class="sec07__box"> 20 <div class="contents__text"> 21 <h2 class="contents__title"> 22 乾燥小じわ・・・スゴイ! 23 </h2> 24 <div class="contents__about"> 25 寝る前にアクアテクトゲルを多めに塗って<br>みると、乾燥小ジワが・・・。スゴイ!と思い<br> 26 ました。肌の調子がいいだけで、ウキウキ<br>な気持ちになれるので、出会えてよかった。 27 </div> 28 <p class="contents__name"> 29 まーちゃんさま(24歳)愛用歴:3週間 30 </p> 31 </div> 32 <figure class="thumbnail__img"> 33 <img src="./assets/images/pc/thumbnail02.jpg" alt=""> 34 </figure> 35 </div>

scss

1 .sec07__box { 2 display: flex; 3 justify-content: space-between; 4 padding: 35px; 5 background-color: #fff; 6 &:nth-of-type(even) { 7 flex-direction: row-reverse; 8 } 9 }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/10/02 00:44

どう反映されてほしいのでしょう。
guest

回答1

0

ベストアンサー

提示されたHTMLファイル(の一部)とSCSSファイルを基に、手元の環境で試したところ、sec07__boxクラスの2つのdiv要素の内容が左右に振り分けられて表示されます。あなたの手元でそうなっていないなら、

  • SCSSファイルをコンパイルしていない(CSSファイルが生成されていない)
  • 生成されたCSSファイルを読み込んでいない

といった、質問に書かれていない部分に問題があると思われます。

投稿2020/10/02 01:08

Daregada

総合スコア11990

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyu

2020/10/02 01:58

すみません。 scssの閉じタグが間違えておりました。 問題は解決しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問