CSSセレクタ

擬似クラス

pseudo-classes
・要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタ

CSS3もCSS2も同じ記述方式
・何れも「：シングルコロン」使用

一覧表

セレクタの書式	スタイルを適用する対象	使用例
要素名:link	未訪問のリンク	a:link {color:blue;}
要素名:visited	訪問済のリンク	a:visited {color:blue;}
要素名:hover	カーソルが乗っている要素	a:hover {color:blue;}
要素名:active	クリック中の要素	a:active {color:blue;}
要素名:focus	フォーカスされている要素	input:focus {background:blue;}
要素名:lang	特定の言語を指定した要素	p:lang(en) {color:blue;}
要素名:first-child	要素内の最初の子要素	p:first-child {color:blue;}
要素名:nth-of-type(n)	その種類のn番目要素。途中で別の種類の要素が入る場合にはそれを数えず、 指定した種類の要素のみを数え、スタイル適用の対象を決定する	p:nth-of-type(1)
要素名:nth-child(n)	種類に関係なく要素を数えて、n番目	p:nth-child(1)

擬似要素

pseudo-element
・要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタ

CSS3記述方式
・「::ダブルコロン」使用

CSS2同じ記述方式
・「：シングルコロン」使用

---

CSS3擬似要素

セレクタの書式	スタイルを適用する対象	使用例
要素名::first-line	要素の最初の一行	p::first-line {color::blue;}
要素名::first-letter	要素の最初の一文字	p::first-letter {color::blue;}
要素名::before	要素の直前	blockquote::before {content::"『";}
要素名::after	要素の直後	blockquote::after {content::"』";}

---

CSS2擬似要素

セレクタの書式	スタイルを適用する対象	使用例
要素名:first-line	要素の最初の一行	p:first-line {color:blue;}
要素名:first-letter	要素の最初の一文字	p:first-letter {color:blue;}
要素名:before	要素の直前	blockquote:before {content:"『";}
要素名:after	要素の直後	blockquote:after {content:"』";}

属性セレクタ

一覧表

セレクタの書式	スタイルを適用する対象	使用例
要素名[属性名]	特定の属性を持つ指定要素	a[target] {color:blue;}
要素名[属性名= "属性値"]	特定の属性値を持つ指定要素	a[target="_blank"] {color:blue;}
要素名[属性名~= "属性値"]	属性値候補と一致した要素	p[class~="sample"] {color:blue;}

---

具体例

指定文字列で開始するid

作成例
・画面サイズ700px以下でのみ適用
・tabsクラス内にあるdivの内、文字aで開始するidをセレクト

一覧表

名前	セレクタの書式	スタイルを適用する対象	使用例
複数セレクタ	セレクタ,セレクタ	複数のセレクタ	h1, h2 {color:blue;}
子孫セレクタ	セレクタ セレクタ	下の階層の子孫要素	p strong {color:blue;}
子セレクタ	セレクタ>セレクタ	直下の階層の子要素	p > strong {color:blue;}
隣接セレクタ	セレクタ+セレクタ	直後に隣接している要素	h1 + p {color:blue;}

---

子セレクタ

▼HTML

<div class="mobile clearfix">

  <div class="header">

    <span class="ion-ios-navicon pull-left"><i></i></span>

    <span class="title">ホーム</span>

  </div>

  <div class="sidebar">

  </div>

</div>

▼CSS

.mobile .header .ion-ios-navicon>i {

  height: 1px;

  width: 20px;

  margin-top: 5px;

  background: #fff;

  position: relative;

  display: inline-block

}

.mobile .header .ion-ios-navicon>i:after,

.mobile .header .ion-ios-navicon>i:before {

  content: '';

  width: inherit;

  height: inherit;

  position: absolute;

  background: inherit

}

.mobile .header .ion-ios-navicon>i:before {

  bottom: 12px

}

.mobile .header .ion-ios-navicon>i:after {

  bottom: 6px

}