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

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

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

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

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

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

最後のcontent-wrapper内のすべての文字色のみ文字色を変更したい

mitrasi
mitrasi

総合スコア0

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

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

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

321閲覧

投稿2021/05/14 08:49

編集2022/01/12 10:58

前提・実現したいこと

最後のcontent-wrapper内の文字色のみ文字色を変更したいです。

思いつく方法としては以下の通りですが、二番目の方法は避けたいです。
(クラス名を増やすのではなく、保守性などの観点から疑似要素でも正しく指定できるようになりたいため)
①疑似要素(:last-of-type :last-child など)
②別途classを付与する

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

.content-wrapper:last-of-type{ color:red; } //などとすると他の箇所も色がついてしまう(記事、Q&A など)

該当のソースコード

HTML

<!DOCTYPE html> <html lang='ja'> <head> <meta charset='UTF-8'> <title>ユアコーディング</title> <link rel='stylesheet' href='css/reset.css'> <link rel='stylesheet' href='css/style.css'> <meta name='viewport' content='width=device-width,initial-scale=1'> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet"> </head> <body> <main> <!-- fv ファーストビュー --> <div class=" fv"> <div class="fv-wrapper bg-img flex-box"> <div class="text-wrapper"> <div class="copy"> <p class="main-copy">コーディングの手間を<br> 最小に、デザインに注力 <br> する助けに</p> <p class="ja-copy">ユアコーディングはコーディングに<br> 特化したフリーランス<br> デザインに注力されたい方の<br> 助けになります</p> </div> <p class="btn">お問い合わせ</p> </div> <div class="img-wrapper"> <img src="img/manager.png" alt="" class="fv-img"> </div> </div> </div> <!-- 長いためいくつかのsectionを省略しております  -->  <!-- blog --> <section class="section-wrapper bg-sky"> <div class="inner-wrapper"> <h2 class="title">ブログ</h2> <h3 class="en-title">BLOG</h3> <ul class="blog-list flex-box"> <li class="blog-card"> <img src="img/austin-distel-wawEfYdpkag-unsplash.png" alt="" class="blog-img"> <div class="text-wrapper"> <h4 class="blog-title">サイトをリニューアルオープンしました。</h4> <time>2020.01.23</time> </div> </li> <li class="blog-card"> <img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt="" class="blog-img"> <div class="text-wrapper"> <h4 class="blog-title">WebサイトでSEO内部施策に適したコー ディングでどれぐらいサイトが早くなるの か検証してみました</h4> <time>2020.01.24</time> </div> </li> <li class="blog-card"> <img src=" img/brooke-cagle-g1Kr4Ozfoac-unsplash.png" alt="" class="blog-img"> <div class="text-wrapper"> <h4 class="blog-title">ユアコーディングではデザイナーの方を 広く募集しています。</h4> <time>2020.01.25</time> </div> </li> </ul> </div> </section> <!-- works --> <section class="section-wrapper"> <div class="inner-wrapper"> <h2 class="title">制作実績</h2> <h3 class="en-title">WORKS</h3> <ul class="work-list flex-box"> <li class="work-item"> <img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt="" class="work-img"> <h6 class="work-title">コーディングカンファレンスのイベント LPの制作を行いました!</h6> <p>採用技術:jQuery,WordPress<br> 実装期間:4週間 <br>担当コーダー:石井</p> </li> <li class="work-item"> <img src="img/digital-marketing-1.png" alt="" class="work-img"> <h6 class="work-title">株式会社サンプル様採用サイトのコーデ ィングを行いました!</h6> <p>採用技術:jQuery,Bootstrap4<br> 実装期間:2週間 <br>担当コーダー:石井</p> </li> <li class="work-item"> <img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt="" class="work-img"> <h6 class="work-title">株式会社サンプル様通販サイトのコーデ ィングを行いました!</h6> <p>採用技術:jQuery,Bootstrap4 <br>実装期間:6週間<br> 担当コーダー:石井</p> </li> <li class="work-item"> <img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt="" class="work-img"> <h6 class="work-title">コーディングカンファレンスのイベント LPの制作を行いました!</h6> <p>採用技術:jQuery,WordPress<br> 実装期間:4週間 <br>担当コーダー:石井</p> </li> </ul> </div> </section> <!-- contact --> <section class="section-wrapper gradetion"> <div class="content-wrapper"> <h2 class="title">お問い合わせ</h2> <h3 class="en-title">CONTACT</h3> <p class="sub-title">コーディングの人出が足りないとき、 あなたの力になります</p> <form> <dl> <dt>お名前</dt> <input type="text" class="contact-form"> </dl> <dl> <dt>メールアドレス</dt> <input type="text" class="contact-form"> </dl> <dl> <dt>お問い合わせ内容</dt> <textarea name="" id="" cols="30" rows="10"></textarea> </dl> <dl> </dl> <p class="text">プライバシーポリシーに同意する</p> <div class="btn"></div> </form> </div> </section> </main> <script src="js/main.js"></script> </body> </html>

該当のソースコード

CSS

@charset "UTF-8"; /*カラーコード*/ /*mixin*/ html { font-size: 62.5%; } html body { line-height: 1.8; font-size: 1.6rem; font-family: 'Noto Sans JP', sans-serif; /*max-widthなしverのcontent-wrapper*/ /*オプション*/ /*header*/ /*fv*/ /*letter*/ /*footer*/ /*price*/ /*q&a*/ /*blog*/ /*works*/ /*contact*/ /* .content-wrapper:last-of-type{ color:pink; } */ /*footer*/ } html body a { text-decoration: none; } html body img { width: 100%; vertical-align: bottom; } html body .content-wrapper { max-width: 75vw; padding: 17.2vw 21.4vw; margin: 0 auto; text-align: center; padding: 8%; color: #333333; } html body .inner-wrapper { padding: 17.2vw 21.4vw; margin: 0 auto; text-align: center; padding: 8%; } html body .reverce { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } html body .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } html body .gradetion { background: -webkit-linear-gradient(left, #05A5FA, #67FFD6); /*グラデーション以外は省略*/ } html body .logo { width: 4vw; } html body .header-menu p { padding-right: 4vw; } html body .fv { position: relative; top: 0; margin: 0 auto; text-align: center; } html body .fv-img { width: 60.5vw; /* padding-left:13vw; */ } html body th, html body td { font-weight: bold; } html body th { padding: 5% 4%; } html body td { border-left: 1px solid #E5E5E5; padding: 5% 4%; text-align: left; max-width: 84px; } html body .attention { font-weight: bold; padding-top: 36px; } html body .qa-wrapper dt, html body .qa-wrapper dd { border: 1px solid #E5E5E5; } html body .qa-wrapper dt { padding: 2vw; } html body .qa-wrapper dd { background-color: #F2F2F2; padding: 3vw; text-align: left; } html body .blog-card { background-color: #FFFFFF; width: 28vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 5; -ms-flex-positive: 5; flex-grow: 5; } html body .blog-img { height: 260px; } html body .text-wrapper { padding: 1.4vw; text-align: right; font-weight: bold; } html body .blog-title { text-align: left; } html body .work-item { margin-right: 4vw; border: 1px solid #E5E5E5; text-align: left; /* width:322px; */ /* margin: 0 calc(10% - 10vw); */ width: 100vw; } html body .work-item p { padding: 18px; } html body .content-wrapper:last-of-type { color: red; } html body .en-title:last-child { color: #FFFFFF; } html body .sub-title { max-width: 270px; text-align: center; margin: 0 auto; } html body form { background-color: #FFFFFF; margin-top: 44px; color: #333333; font-weight: bold; } /*# sourceMappingURL=style.css.map */

_va

/*カラーコード*/ $copy-color:#3BA6C9; $black:#333333; $bg-sky:#EEFBFB; $bg-glay:#F2F2F2; $line-glay:#E5E5E5; $bg-blue:#0C449B; $white:#FFFFFF; $shasow-glay:#00000029; $gra-blu:#05A5FA; $gra-gre:#63FBD7; $gra-green:#67FFD6; /*mixin*/ @mixin btn($text){ content:$text; }

試したこと

■指定個所を変えてみる(content-wrapper以外)
→特に変化なし

認識としては
■last-of-type
疑似クラスを付与した箇所の要素すべてに
例).content-wrapper:last-of-type{
}
//複数あるcontent-wrapperのうち最後のcontent-wrapperを指す

■last-child
疑似クラスを付与した箇所の子要素にたいして
例)
.section-wrapper:last-child{
}
//section-wrapperの中に(content-wrapper/p/img があったとしたら)
最後の要素に対してなのでimgを指すことになる

補足情報(FW/ツールのバージョンなど)

OS:Windows
エディタ:vscode
ブラウザ:クローム

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy
Lhankor_Mhy

2021/05/14 08:55

「最後のcontent-wrapper」とのことですが、ご提示のコードには一つしかないようでした。 これは「content-wrapperの中の最後の要素」というような意味ですか?
mitrasi
mitrasi

2021/05/14 09:26 編集

すみません端折った方にcontent-wrapperがあり、残したところにcontent-wrapper使用してない箇所でした。訂正致しました。 どうぞよろしくお願い致します。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

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

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。