知っていれば便利な「ＣＳＳ18選」

2014年8月31日

【CSS】保存版！忘れがちなCSS セレクタ18個

普段あまり使わないCSSセレクタを使いたい時、どんな書式だったっけ？とその都度調べていませんか？また、CSSのチュートリアルなどを見ていて、この記号は何だろう・・・ということはありませんか？
今回は、忘れがちな、でも覚えておくと便利なCSSセレクタを一挙まとめてご紹介します。

１.＊（アスタリスク）

/*css*/
*{
font-size:12px;
}

全てのP要素に適用されます。

/*css*/
p*{
font-size:12px;
}

2.>（大なり）

直下の要素にのみ、適用されます。

/*css*/
div.sample01 > a{
 color:red; 
}

HTML

テキスト１（直下の子要素）
テキスト２（直下の子要素）

テキスト３（直下ではない）

３.~（チルダ）

後ろにある要素にのみ、適用されます。

/*css*/
div.sample02 ~ a{ /*sample02の後ろにあるa要素にのみ適用*/
color:red; 
} 

HTML

リンク1（前にある）
ここが基準（sample02クラス）
リンク1（後ろにある）
リンク２（後ろにある） 

４.+（プラス）

隣接する要素にのみ、適用されます。

/*css*/
div.sample03 + p{/*sample03に隣接する次の要素にのみ適用*/
color:red;
} 

HTML

ここが基準（sample03クラス）
テキスト１（隣接している）
テキスト２（隣接していない）

5.first-line

要素の最初の行にのみ適用されます。

/*css*/
p.sample04:first-line{ 
color:red; 
} 

HTML

最初の行です。適用されます。<br>で改行をしなくても、２行目からは適用されません。長い文章が続いて右端で折り返し、２行目に入った時点で適用されなくなります。 
 

6.first-letter

要素の最初の文字にのみ適用されます。

/*css*/
p.sample04:first-letter{ 
color:red; 
} 

HTML

最初の文字にのみ適用されます。
 

7.first-child

要素の最初の文字にのみ適用されます。

/*css*/
.sample06 p:first-child{ 
color:red; 
}

HTML

 
最初のp要素にのみ適用されます。
次のP要素には適用されません。

8.not

該当しない場合にのみ適用されます（CSS3）。

/*css*/
.sample07 p:not(#sample07){/*id名がsample07以外のp要素に適用*/
color:red; 
}

HTML

idがsample07ではない
idがsample07
idがsample07ではない

9.要素[属性]

特定の属性を持つ要素にのみ適用されます。

/*css*/
.sample08 a[title]{/*title属性を持つa要素にのみ適用*/ 
color:red;
}

HTML

タイトル属性あり

タイトル属性なし
 

10.要素[属性=”属性値”]

特定の属性値を持つ要素にのみ適用されます。

/*css*/
.sample10 input[type="button"]{/*input type="button"にのみ*/ 
color:red; 
}

HTML

11.要素[属性^=”属性値”]

特定の属性値で始まる要素にのみ適用されます（CSS3）。

/*css*/
.sample09 a[title^="OK"]{/*”OK”という文字で始まるタイトルを持つ要素にのみ適用*/ 
color:red; 
}

HTML

タイトルは「OKで始まるタイトル」

タイトルは「NGで始まるタイトル」

 

12.要素[属性$=”属性値”]

特定の属性値で終わる要素にのみ適用されます（CSS3）。

/*css*/
.sample11 a[title$="OK"]{/*”OK”という文字で終わるタイトルを持つ要素にのみ適用*/ 
color:red;
} 

HTML

タイトルは「このタイトルはOK」

タイトルは「このタイトルはNG」

 

13.要素[属性*=”属性値”]

特定の属性値を含む要素にのみ適用されます（CSS3）。

/*css*/
.sample12 a[title*="OK"]{/*”OK”という文字を含むタイトルを持つ要素にのみ適用*/
color:red;
}

HTML

タイトルは「このタイトルはOKを含む」

タイトルは「このタイトルはNGを含む」

 

14.checked

チェックされている要素にのみ適用されます。
inputに隣接するlabelなどに使い、チェックで変化させることができます。

/*css*/
.sample13 input[type=checkbox]:checked + label{/*チェックされているcheckbox要素にのみ適用*/ 
color:red; 
} 

HTML

チェック１
チェック２
 

15.nth-of-type(n)

n番目の要素にのみ適用されます。

/*css*/
.sample14 p:nth-of-type(2){/*2番目の要素にのみ適用*/ 
color:red; 
}

HTML

1番目
2番目
3番目
4番目
 

16.nth-last-of-type(n)

後ろからn番目の要素にのみ適用されます。

/*css*/
.sample15 p:nth-last-of-type(2){/*後ろから2番目の要素にのみ適用*/ 
color:red;
}

HTML

後ろから4番目
後ろから3番目
後ろから2番目
後ろから1番目

17.nth-child(n)

n番目の子要素にのみ適用されます。

/*css*/
.sample16 p:nth-child(2){/*2番目の子要素にのみ適用*/ 
color:red; 
}

HTML

1番目
2番目
3番目
4番目

18.nth-child(n)

後ろからn番目の子要素にのみ適用されます。

/*css*/
.sample17 p:last-child{/*最後にある子要素にのみ適用*/ 
color:red; 
} 

HTML

最初
2番目
3番目
最後

n番目の部分は、以下のようにも指定できます。
odd:奇数
even：偶数
2n：2の倍数（つまり偶数）
2n+1：奇数

一つひとつにクラスやIDを付けず、以上のような方法で記述するとスマートでいいですね。