[CSS] Selector(選択子)

こんにちは。明月です。

CSSでSelectorというのはHTMLドキュメントにスタイルを付けるような指示子ということです。このSelectorは単一のタグを設定も可能し、復讐のタグの設定も可能です。

そして、タグだけの指示だと特定タグを選択するのは大変ですが、アトリビュート、配列順番なのでも選択が可能です。

参照リンク - https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectorを確認するように先にHTMLドキュメントを作成しましょう。

<div id="test">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>C</td>
        <td>D</td>
      </tr>
    </tbody>
  </table>
</div>

上のHTMLタグは普通のテーブルタグです。HTMLタグを作成したことがある方なら構造がすく理解すると思いますね。

そうすると我々は「tbody」タグの１番の「tr」タグの１版「td」タグを選択したいならどうしましょうか？

簡単にタグで選択すると「table#test > tbody > tr:nth-child(0) > td:nth-child(0)」になります。

意味としてはtableのアトリビュートのiｄがtestのタグの直下派生のtbodyの直下派生のtrタグの０番目の直下派生のtdタグの0番目のタグを指しています。

複雑ですね。でもタグを指しる時にはこんなに細かく全てのタグ名を書く必要はないです。

table{
  border-top:1px solid #000;
  border-left:1px solid #000;
  border-spacing: 0px;
  padding:0px;
}
th{
  border-bottom:1px solid #000;
  border-right:1px solid #000;
  width:500px;
  height:50px;
}
td{
  border-bottom:1px solid #000;
  border-right:1px solid #000;
  width:500px;
  height:50px;
}
div#test > table > tbody > tr > td:nth-child(1){
  background-color:#000;
  color:#FFF;
}

タグでスタイルを定義するのはそんなに難しくないですね。

それなら、CSS Selectorに関して纏めます。

纏めてみると量がかなりありますね。部分的にセレクトの種類別で分けて例や詳しく説明します。