CSSをクイズ形式で勉強する

こんにちは！

５月からbravesoftでインターンとして働いているヒロアキです！
業務では主にHTML, CSS, JavaScriptといった言語を使いLive! アンケートを開発しています。

今回ブログを執筆する機会を頂いたのでCSSのクイズを考えてみました！

 

第１問

index.html

<div class="title"></div>
<p class="box">赤くなる</p>
<p class="box">赤くならない</p>

style.css

.title [?] .box {
  color: red;
}

 

問題
[?]に入るコードはなんでしょうか？

 

 

 

 

 

正解

+ です！

『+』を使用して記述されたセレクタを『隣接セレクタ』といいます。隣接した次の要素に対してのみデザイン反映の対象になります。

 

第２問

index.html

<div>
  <p class="box">赤くならない</p>
  <p class="box">赤くなる</p>
  <p class="box">赤くならない</p>
  <p class="box">赤くなる</p>
</div>

style.css

p:nth-of-type([?]){
  color: red;
}

 

問題
[?]に入るコードはなんでしょうか？

 

 

 

正解

even です！

[]の中にevenと記入と記入することで偶数番号の要素のデザインを反映させることができます。

 

第３問

index.html

<div class="title">
    <p class="box">赤くなる</p>
    <p class="box">赤くなる</p>
    <p class="box">赤くなる</p>
    <p class="box">赤くなる</p>
    <div>
      <p>赤くなる</p>
      <div>
        赤くなる
      </div>
    </div>
  </div>

style.css

[?] {
  color: red;
}

問題
[?]に入るコードはなんでしょうか？

 

 

 

 

 

 

正解

* です！

*によりhtmlに書かれたすべての要素が対象になります

 

 

第４問

index.html

<div class="title">
  <p class="box">赤くならない</p>
  <p class="box">赤くなる</p>
  <p class="box">赤くならない</p>
  <p class="box">赤くならない</p>
</div>

style.css

p:nth-of-type([?]){
  color: red;
}

 

問題
[?]に入るコードはなんでしょうか？

 

 

 

正解

2 です！

[?]には自分の好きな数字を入れることで前から[?]の要素にデザインが反映されます。

 

 

第５問

index.html

<div class="title">
  <span>赤くならない</span>
  <p class="box">赤くなる</p>
  <div>
    <p class="box">赤くならない</p>
  </div>
</div>

style.css

.title [?] .box {
  color:  red;
}

問題
[?]に入るコードはなんでしょうか？

 

 

 

 

正解

> です！は基準要素の1つ下にある子要素を指定するためのセレクタです。

 

 

 

意外とわからないセレクタ、普段使ってないけど便利なセレクタがたくさんありますよね！

 

皆さんの普段の開発に参考になれば、幸いです。
最後まで読んでいただきありがとうございました！