CSS Selector
CSSにおけるセレクタとは、HTML文書内の制御対象を特定するものであり、思い通りのデザインを実現するためには「相手を確実に掴む」という意味で、その方法を正しく理解することが重要です。
セレクタ { プロパティー:値; プロパティー:値; }
以下様々なセレクタの書き方についてまとめています。
付記:親要素/子要素
階層構造をもつ文書において対象を特定する際に頻出するキーワードです。外側の要素を親要素、中に囲まれている要素を子要素といいます。
<div> ← 親要素 <p> ・・・ </p> ← 子要素 <p> ← 子要素 <span>・・・</span> ← 孫要素 </p> <p> ・・・ </p> ← 子要素 </div>
CONTENTS
基本セレクタ
要素セレクタ(HTML要素名)
HTMLタグ名 {・・・}
HTMLタグである <h1>や<p>はそのままセレクタとなります。
IDセレクタ
#ID名 {・・・}
定義されたIDに適用
前提:ID名はページ内に1つ(重複してはいけません)
命名:一般に camelCase を使います。
クラスセレクタ
.クラス名 {・・・}
定義されたクラスに適用
前提:クラス名はページ内に複数
命名:一般に chain-case を使います。
ユニバーサルセレクタ
* {・・・}
すべての要素に適用
CSSの先頭で余白を0リセットする場合などに使用
複合セレクタ
セレクタ, セレクタ, セレクタ, ・・ {・・・} 例)h2, h3, h4 {・・・}
複数のセレクタにまとめて同一の定義を行う場合に使用
階層セレクタ
子セレクタ
親要素 > 子要素 {・・・}
特定の親を持つ子要素をセレクト
div > span {・・・} --------------------- <div> <span>子要素</span> ← 選択される <p><span>孫要素</span></p> <span>子要素</span> ← 選択される <span>子要素</span> ← 選択される </div>
子孫セレクタ
親要素 子要素 {・・・}
特定の親を持つ子・孫・・・の要素をセレクト
div span {・・・} --------------------- <div> <span>子要素</span> ← 選択される <p><span>孫要素</span></p> ← 選択される <p><a href="#"><span>ひ孫要素</span></a></p> ← 選択される <span>子要素</span> ← 選択される </div>
隣接セレクタ
指定要素 + 要素 {・・・}
指定要素に後続隣接する要素にのみスタイルを適用
#B + p {・・・} --------------------- <div> <p id="A">要素</p> <p id="B">要素</p> <p id="C">要素</p> ← 選択される <p id="D">要素</p> </div>
項目をリストで [A] [B] [C] [D] と並べるとき
Aを除く他のアイテムに左マージンを設定したい・・・などに便利です。
li { display: inline-block;} li + li { margin-left: 16px; }
兄弟セレクタ
指定要素 ~ 要素 {・・・}
指定要素に後続する要素すべてにスタイルを適用
#B ~ p {・・・} --------------------- <div> <p id="A">要素</p> <p id="B">要素</p> ← 選択される <p id="C">要素</p> ← 選択される <span id="D">要素</span> <p id="E">要素</p> ← 選択される </div>
属性セレクタ
属性名 指定
セレクタ [ 属性名 ] {・・・}
属性を持つ要素にスタイルを適用
a[title] {・・・} --------------------- <a href="#" title="abc">abc</a> ← 選択される <a href="#" title="def">def</a> ← 選択される
属性名=属性値 指定
セレクタ [ 属性名 = 属性値 ] {・・・}
属性が特定の値を持つ要素にのみスタイルを適用
a[title="abc"] {・・・} --------------------- <a href="#" title="abc">abc</a> ← 選択される <a href="#" title="def">def</a>
付記:for 属性について
for属性はフォームパーツと要素を関連付けるために用いられる属性で、label 要素に用いられます。
labelタグの書き方は2種類あって、1つはlabelタグで挟む方法、もうひとつがfor属性を使う方法です。
- labelタグで挟む書き方
<label><input type="text" name="name">名前:</label>
- for属性を使う書き方
<label for="text_id">名前:</label> <input type="text" name="name" id="text_id">
フォーム部品の id を label タグの for 属性に割り当てます。
以下の例では、label要素に for属性をつけることで、同じ内容のid属性を持つ要素と関連付けています。そのままコピペするだけで、あなたのページにGoogle検索ボタンをつけることができます。
<form action="http://www.google.com/search" method="get"> <label for="key">Google: </label> <input id="key" type="search" name="q"> <input type="submit"> </form>
擬似要素
CSS3 以降、擬似要素は ::before のようにコロンを2つ、擬似クラスは従来どおり :hover のようにコロンを1つとして、両者の識別を強調しています。
以下の説明で、[ E ] はelememt つまり「要素名」を意味します。
before 擬似要素
E::before {・・・}
要素直前の内容を定義。contentプロパティと組合せて使用します。
例) li::before { content: "▼"; }
after 擬似要素
E::after {・・・}
要素直後の内容を定義。contentプロパティと組合せて使用します。
例) li::after { content: "▼"; }
first-letter 擬似要素
E::first-letter {・・・}
最初に現れる1文字にだけ適用
p:first-letter {・・・} 段落の最初の1文字にのみ適用
first-line 擬似要素
E::first-line {・・・}
最初の行にだけ適用
擬似クラス
擬似クラスは従来どおりコロン [ : ]は1つです。
link, visited, hover, active 擬似クラス
E:link {・・・} リンクのデフォルトの状態 E:visited {・・・} 訪問済みリンクの状態 E:hover {・・・} マウスホバリング時の状態 E:active {・・・} リンクがアクティベートされた時の状態
主として A タグの要素のデザインに使います。
擬似クラスの記述順序には「常に最後の指定で上書きされる」点に注意し、link、visited、hover、active の順番で記述することをお勧めします。逆に、訪問済みのリンクの状態を維持したい場合ば、visited を最後に・・
hover が効かない、訪問済みのリンクの色が変わらない、といった場合は、この順序を確認してみて下さい。
focus 擬似クラス
E:focus {・・・}
フォーカスが入った時の状態
主としてform関連のエレメントにフォーカスが入った場合に使います。
target 擬似クラス
E:target {・・・}
ターゲットとなるアンカーリンク先の要素を表します。
例えば、デフォルトではコメント欄が非表示で、クリックで表示・・といったことが簡単に実装できます。
- HTML
<a href="#comment">コメントを表示</a> <article id="comment"> <h3>Comments</h3> <p>・・・・・・・</p> <a href="#">コメントを隠す</a> </article>
- CSS
#comment:not(:target) { display: none; } #comment:target { display: block; }
first-child 擬似クラス
E:first-child {・・・}
最初に現れる要素にのみ適用。以下は、最初の p 要素にのみ適用
p:first-child {・・・}
last-child 擬似クラス
E:last-child {・・・}
最後に現れる要素にのみ適用。以下は、最後の li 要素にのみ適用
li:last-child {・・・}
nth-child 擬似クラス
E:nth-child(n) {・・・}
指定要素の親要素内のn番目の子要素にスタイルを適用する際に使用します。
nの部分には、整数・奇数を表すodd・偶数を表すeven・数式を指定することができます。 数式で奇数を指定する場合には2n+1、数式で偶数を指定する場合には2n+0となります。
以下の例では「指定されたpタグの親要素内の2番目の子要素」ということから abc が赤くなります。
p:nth-child(2) { color: red;} ----------------------------- <section> <h1>"A"</h1> <p> "abc"</p> ← 赤 <p> "def"</p> </section>
nth-last-child 擬似クラス
E:nth-last-child(n) {・・・}
指定要素の親要素内で後ろからn番目の子要素にスタイルを適用します。
first-of-type 擬似クラス
E:first-of-type {・・・}
最初のその種類の要素にスタイルを適用する際に使用します。
last-of-type 擬似クラス
E:last-of-type {・・・}
最後のその種類の要素にスタイルを適用する際に使用します。
nth-of-type 擬似クラス
E:nth-of-type(n) {・・・}
n番目に現れる要素にのみ適用
nの部分にodd と書くと奇数番目のみ、evenと書くと偶数番目のみに適用
以下の例では「指定されたpタグで、その親要素内のpタグ内で2番目の要素」ということから def が赤くなります。
p:nth-of-type(2) { color: red;} ----------------------------- <section> <h1>"A"</h1> <p> "abc"</p> <p> "def"</p> ← 赤 </section>
nth-last-of-type 擬似クラス
E:nth-last-of-type(n) {・・・}
後ろから数えてn番目に現れる当該要素にスタイルを適用
checked 擬似クラス
E:checked {・・・}
ラジオボタンやチェックボックスなど、チェックされた要素に適用。
以下の例では、チェクされた方の label の文字(選択肢1または選択肢2)が 赤字になります。
- CSS
input[type=radio]:checked + label { color: red; }
補足:[+ label ] という記述は、それに隣接する label 要素を意味します。 - HTML
<form> <input type="radio" name="btn"> <label>選択肢1</label> <input type="radio" name="btn"> <label>選択肢2</label> </form>
empty 疑似クラス
E:empty {・・・}
要素内がテキストや空白などを含め空の場合に適用されるセレクタ。
否定擬似クラス
E:not {・・・}
指定したセレクタに該当しない場合にスタイルが適用。例外を定義したい場合に便利です。
img:not(.abc) {・・・} img要素のうち abcクラス以外に適用 li:not(:last-child){・・・} li要素のうち最後の要素以外に適用 p:not(.sampleText) {・・・} p要素のうち.sampleText以外の要素に適用
root 擬似クラス
:root {・・・}
文書のルートとなる要素(html)にスタイルを適用する際に使用します。