はじめに
CSSセレクタとはCSSを適用するときに、どの要素に適用するかを指定する部分です。CSSセレクタには種類が多いのでご紹介します。
基本的な書き方はこのように書きます。
/*
セレクタ {
プロパティ: 値;
}
*/簡単な例だとこのように書きます。
/*html全体の文字のサイズを12pxにする*/
html {
font-size: 12px;
}
/*div要素の周りの余白を5px空ける*/
div {
margin: 5px;
}この場合だと要素を指定していますが、この指定する方法にはいくつか種類があります。CSSをコーディングしていると簡単な指定ではうまく表現できないことがあります。様々な指定方法を覚えておくと、画面のデザイン方法の幅が広がるので一通り目を通しておきましょう。
CSSセレクタ一覧
基本セレクタ
- 要素セレクタ
- IDセレクタ
- classセレクタ
- 全称セレクタ
- グループセレクタ
- 属性セレクタ
階層セレクタ
- 子セレクタ
- 小孫セレクタ
- 隣接セレクタ
- 関節セレクタ
疑似クラス
- マウスオーバーセレクタ
- フォーカスセレクタ
- チェックセレクタ
- 最初の要素指定セレクタ
- 最後の要素指定セレクタ
- n番目指定セレクタ
- 否定セレクタ
CSSセレクタ解説
基本セレクタ
要素セレクタ
指定されたタグ名の要素を取得します。書き方はタグ名をそのまま書きます。
<style>
div {
margin: 5px;
}
</style>
<div></div>IDセレクタ
指定されたID属性を持つ要素を取得します。#ID名で書きます。
<style>
#foo {
margin: 5px;
}
</style>
<div id="foo"></div>classセレクタ
指定されたclass属性を持つ要素を取得します。.class名で書きます。
<style>
.foo {
margin: 5px;
}
</style>
<div class="foo"></div>全称セレクタ
すべての要素を取得します。
<style>
* {
margin: 5px;
}
</style>
<h1></h1>
<div></div>グループセレクタ
セレクタを複数まとめて取得します。セレクタをカンマ区切りで指定します。
<style>
h1,div {
margin: 5px;
}
</style>
<h1></h1>
<div></div>属性セレクタ
指定された属性と値を持つ要素を取得します。属性と値で指定します。
<style>
input[name="text"] {
margin: 5px;
}
input[name="foo"] {
width: 50px;
}
</style>
<input type="text" name="foo"/>階層セレクタ
子セレクタ
指定の親要素を持つ子要素を取得する。「親要素>子要素」の形式で指定します。
<style>
/*ulの子のli要素を取得*/
ul>li {
margin: 5px;
}
</style>
<ul>
<li>1</li>
<li>2</li>
</ul>小孫セレクタ
指定の祖先要素を持つ子孫要素を取得する。「祖先要素 子孫要素」の形式で指定する。わかりづらいが祖先要素と子孫要素の間は半角スペースである。
<style>
/*divの子孫のli要素を取得*/
div>li {
margin: 5px;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>隣接セレクタ
指定の前要素の次にある後要素のみを取得する。「前要素+後要素」の形式で記載する。
<style>
/*classがs1のspan要素のみ取得できる*/
div+span {
margin: 5px;
}
</style>
<div></div>
<span class="s1"></span>
<span class="s2"></span>関節セレクタ
指定の前要素以降にある兄弟要素を取得する。「前要素~兄弟要素」の形式で記載する。
<style>
/*div以降にあるspan要素を取得できる(s2とs3)*/
div+span {
margin: 5px;
}
</style>
<span class="s1"></span>
<div></div>
<span class="s2"></span>
<span class="s3"></span>疑似クラス
マウスオーバーセレクタ
指定の要素にマウスオーバーしたときの要素を取得できる。要素に「:hover」を付ける。
<style>
/*div要素にマウスオーバーしたとき適用される*/
div:hover {
cursor: pointer;
}
</style>
<div>ボタン</div>フォーカスセレクタ
指定の要素がにフォーカスが当たっているときの要素を取得できる。要素に「:focus」を付ける。
<style>
/*div要素にフォーカスが当たったとき適用される*/
input:focus {
background-color: blue;
}
</style>
<input type="text" name="foo">チェックセレクタ
指定の要素（ラジオボタンやチェックボックス）にチェックが入っているときの要素を取得できる。要素に「:checked」を付ける。
<style>
/*div要素にフォーカスが当たったとき適用される*/
input:checked {
background-color: blue;
}
</style>
<input type="radio" name="foo" id="bar">
<input type="checkbox" name="bar" id="bar">最初の要素指定セレクタ
指定した要素の最初の子要素だけ取得できる。要素に「first-child」を付ける。
<style>
/*classがs1のspan要素のみ取得できる*/
span:first-child {
color: red;
}
</style>
<div>
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
</div>最後の要素指定セレクタ
指定した要素の最後の要素だけ取得できる。要素に「:last-child」を付ける。
<style>
/*classがs3のspan要素のみ取得できる*/
span:last-child {
color: red;
}
</style>
<div>
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
</div>n番目指定セレクタ
指定した要素のn番目の要素を取得できる。要素に:「nth-child(n)」を付ける。nは数字を入れる。
<style>
/*classがs2のspan要素のみ取得できる*/
span:nth-child(2) {
color: red;
}
/*classがs2,s4のspan要素を取得できる*/
span:nth-child(2n) {
color: red;
}
</style>
<div>
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span>
</div>否定セレクタ
指定した要素以外の要素を取得する。要素に「:not(要素)」を付ける。
<style>
/*classがs2以外のspan要素を取得できる*/
span:not(.s2) {
color:red;
}
</style>
<div>
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
</div>まとめ
CSSセレクタの指定方法は単純に要素を指定するわけではなく、様々な指定方法があることが分かったと思います。またいくつかのCSSセレクタを組み合わせることができます。組み合わせることでさらにバリエーションが増え、自在にCSSが適用できるようになると思います。また、CSSセレクタの分け方によってコードの可読性にも影響がでるので、ご参考になればと思います。
