Q&A
「最後のcontent-wrapper」とのことですが、ご提示のコードには一つしかないようでした。
これは「content-wrapperの中の最後の要素」というような意味ですか？
前提・実現したいこと
最後のcontent-wrapper内の文字色のみ文字色を変更したいです。
思いつく方法としては以下の通りですが、二番目の方法は避けたいです。
（クラス名を増やすのではなく、保守性などの観点から疑似要素でも正しく指定できるようになりたいため）
①疑似要素（:last-of-type :last-child など）
②別途classを付与する
発生している問題・エラーメッセージ
.content-wrapper:last-of-type{ color:red; } //などとすると他の箇所も色がついてしまう（記事、Q&A など）
該当のソースコード
HTML
1 <!DOCTYPE html> 2<html lang='ja'> 3<head> 4<meta charset='UTF-8'> 5<title>ユアコーディング</title> 6<link rel='stylesheet' href='css/reset.css'> 7<link rel='stylesheet' href='css/style.css'> 8<meta name='viewport' content='width=device-width,initial-scale=1'> 9<link rel="preconnect" href="https://fonts.gstatic.com"> 10<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet"> 11</head> 12<body> 13 14<main> 15 <!-- fv ファーストビュー --> 16 17 <div class=" fv"> 18 <div class="fv-wrapper bg-img flex-box"> 19 <div class="text-wrapper"> 20 <div class="copy"> 21 <p class="main-copy">コーディングの手間を<br> 最小に、デザインに注力 <br> する助けに</p> 22 <p class="ja-copy">ユアコーディングはコーディングに<br> 特化したフリーランス<br> デザインに注力されたい方の<br> 助けになります</p> 23 </div> 24 <p class="btn">お問い合わせ</p> 25 </div> 26 <div class="img-wrapper"> 27 <img src="img/manager.png" alt="" class="fv-img"> 28 </div> 29 </div> 30 31 32 </div> 33 34<!-- 長いためいくつかのsectionを省略しております --> 35<!-- q&a --> 36<section class="section-wrapper"> 37 <div class="content-wrapper"> 38 <h2 class="title">よくある質問</h2> 39 <h3 class="en-title">FAQ</h3> 40 <div class="qa-wrapper"> 41 <dl> 42 <dt>デザインから一貫してお願いすることは可能でしょうか</dt> 43 <dd>ユアコーディングはコーディングに特化したサービスですので、デザインからお受けすることは基本的にありません。<br> ただデザインを行う際は提携しているデザイナーと連携して対応させていただきますので、別途ご連絡ください。</dd> 44 </dl> 45 <dl> 46 <dt>WordPressのカスタマイズをお願いすることも可能でしょうか？</dt> 47 <dd>可能です。ただECサイトなどの場合は構築難易度や工数の関係で綿密にヒアリングさせていただきたく思います。</dd> 48 </dl> 49 <dl> 50 <dt>コーディングのスピード感が知りたい</dt> 51 <dd>HTMLレスポンシブ込み5ページで1週間、10ページで2週間、WordPressサイト5ページで2週間、10ページで3週間が目安に なります。</dd> 52 </dl> 53 </div> 54 </div> 55</section> 56 57 58<!-- contact --> 59<section class="section-wrapper gradetion"> 60 <div class="content-wrapper"> 61 <h2 class="title">お問い合わせ</h2> 62 <h3 class="en-title">CONTACT</h3> 63 <p class="sub-title">コーディングの人出が足りないとき、 あなたの力になります</p> 64 <form> 65 <dl> 66 <dt>お名前</dt> 67 <input type="text" class="contact-form"> 68 </dl> 69 <dl> 70 <dt>メールアドレス</dt> 71 <input type="text" class="contact-form"> 72 </dl> 73 <dl> 74 <dt>お問い合わせ内容</dt> 75 <textarea name="" id="" cols="30" rows="10"></textarea> 76 </dl> 77 <dl> 78 79 </dl> 80 <p class="text">プライバシーポリシーに同意する</p> 81 <div class="btn"></div> 82 </form> 83 </div> 84</section> 85 86 87 88 89 90 91 92 93</main> 94 95<script src="js/main.js"></script> 96</body> 97</html>
該当のソースコード
CSS
1@charset "UTF-8"; 2/*カラーコード*/ 3/*mixin*/ 4html { 5 font-size: 62.5%; 6} 7 8html body { 9 line-height: 1.8; 10 font-size: 1.6rem; 11 font-family: 'Noto Sans JP', sans-serif; 12 /*max-widthなしverのcontent-wrapper*/ 13 /*オプション*/ 14 /*header*/ 15 /*fv*/ 16 /*letter*/ 17 /*footer*/ 18 /*price*/ 19 /*q&a*/ 20 /*blog*/ 21 /*works*/ 22 /*contact*/ 23 /* .content-wrapper:last-of-type{ 24color:pink; 25} */ 26 /*footer*/ 27} 28 29html body a { 30 text-decoration: none; 31} 32 33html body img { 34 width: 100%; 35 vertical-align: bottom; 36} 37 38html body .content-wrapper { 39 max-width: 75vw; 40 padding: 17.2vw 21.4vw; 41 margin: 0 auto; 42 text-align: center; 43 padding: 8%; 44 color: #333333; 45} 46 47html body .inner-wrapper { 48 padding: 17.2vw 21.4vw; 49 margin: 0 auto; 50 text-align: center; 51 padding: 8%; 52} 53 54 55 56html body .reverce { 57 -webkit-box-orient: horizontal; 58 -webkit-box-direction: reverse; 59 -ms-flex-direction: row-reverse; 60 flex-direction: row-reverse; 61} 62 63html body .flex { 64 display: -webkit-box; 65 display: -ms-flexbox; 66 display: flex; 67 -webkit-box-pack: center; 68 -ms-flex-pack: center; 69 justify-content: center; 70 -webkit-box-align: center; 71 -ms-flex-align: center; 72 align-items: center; 73} 74 75html body .gradetion { 76 background: -webkit-linear-gradient(left, #05A5FA, #67FFD6); 77 /*グラデーション以外は省略*/ 78} 79 80 81 82html body .logo { 83 width: 4vw; 84} 85 86html body .header-menu p { 87 padding-right: 4vw; 88} 89 90html body .fv { 91 position: relative; 92 top: 0; 93 margin: 0 auto; 94 text-align: center; 95} 96 97html body .fv-img { 98 width: 60.5vw; 99 /* padding-left:13vw; */ 100} 101 102 103html body th, html body td { 104 font-weight: bold; 105} 106 107html body th { 108 padding: 5% 4%; 109} 110 111html body td { 112 border-left: 1px solid #E5E5E5; 113 padding: 5% 4%; 114 text-align: left; 115 max-width: 84px; 116} 117 118html body .attention { 119 font-weight: bold; 120 padding-top: 36px; 121} 122 123html body .qa-wrapper dt, html body .qa-wrapper dd { 124 border: 1px solid #E5E5E5; 125} 126 127html body .qa-wrapper dt { 128 padding: 2vw; 129} 130 131html body .qa-wrapper dd { 132 background-color: #F2F2F2; 133 padding: 3vw; 134 text-align: left; 135} 136 137html body .blog-card { 138 background-color: #FFFFFF; 139 width: 28vw; 140 display: -webkit-box; 141 display: -ms-flexbox; 142 display: flex; 143 -webkit-box-orient: vertical; 144 -webkit-box-direction: normal; 145 -ms-flex-direction: column; 146 flex-direction: column; 147 -webkit-box-flex: 5; 148 -ms-flex-positive: 5; 149 flex-grow: 5; 150} 151 152html body .blog-img { 153 height: 260px; 154} 155 156html body .text-wrapper { 157 padding: 1.4vw; 158 text-align: right; 159 font-weight: bold; 160} 161 162html body .blog-title { 163 text-align: left; 164} 165 166html body .work-item { 167 margin-right: 4vw; 168 border: 1px solid #E5E5E5; 169 text-align: left; 170 /* width:322px; */ 171 /* margin: 0 calc(10% - 10vw); */ 172 width: 100vw; 173} 174 175html body .work-item p { 176 padding: 18px; 177} 178 179html body .content-wrapper:last-of-type { 180 color: red; 181} 182 183html body .en-title:last-child { 184 color: #FFFFFF; 185} 186 187html body .sub-title { 188 max-width: 270px; 189 text-align: center; 190 margin: 0 auto; 191} 192 193html body form { 194 background-color: #FFFFFF; 195 margin-top: 44px; 196 color: #333333; 197 font-weight: bold; 198} 199 200/*# sourceMappingURL=style.css.map */
_va
1 2/*カラーコード*/ 3$copy-color:#3BA6C9; 4$black:#333333; 5$bg-sky:#EEFBFB; 6$bg-glay:#F2F2F2; 7$line-glay:#E5E5E5; 8$bg-blue:#0C449B; 9$white:#FFFFFF; 10$shasow-glay:#00000029; 11$gra-blu:#05A5FA; 12$gra-gre:#63FBD7; 13$gra-green:#67FFD6; 14/*mixin*/ 15 16@mixin btn($text){ 17 content:$text; 18}
試したこと
■指定個所を変えてみる(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
ブラウザ:クローム
すみません端折った方にcontent-wrapperがあり、残したところにcontent-wrapper使用してない箇所でした。訂正致しました。
どうぞよろしくお願い致します。
回答1件
0
ベストアンサー
こういうことですか？
css
1.section-wrapper:last-child .content-wrapper{ 2 color: red; 3}
投稿2021/05/14 09:13
総合スコア36115
ご回答ありがとうございます！
試してみます
試してみたのですが、scss記法に直すときに間違えているのか私の方では上手くいきませんでした????
.section-wrapper:last-child{
.content-wrapper:last-of-type{
color:red;
}
}
↑それは回答したコードと違うと思いますので、それが上手くいかない原因ではないですか？
Lhankor_Mhy様
すみません！ご提示していただいたコードに直したらうまくいきました！！
ありがとうございます！！
なんでsection-wrapperからの指定が必要だったのかなど理解しきれていない部分があるので参考にさせてもらいながら理解していこうと思います
お役に立てたようで何よりです。
あなたの回答
tips
プレビュー
