■* 全称セレクタ
すべての要素
h3 * em { color: red }
■ 子孫セレクタ
孫やそれ以下の要素に対しても有効
h1 em { color: blue }
<h1>携帯電話、<i>特に<em>i-mode</em></i>の爆発的な普及について</h1>
em要素 は青く表示、樹構造内で h1要素 に入れ子になっている em要素 はすべて対象
■> 子セレクタ
ある要素の直接の子供要素だけ
body > p { line-height: 1.3pt }
<body>
<ul>
<li>
<p>適用外</p>
</li>
</ul>
<p>適用</p>
</body>
■+ 隣接セレクタ
兄弟関係の要素、ある要素より前に登場する要素を兄要素、後に登場する要素を弟要素
p + div { margin-top: 0.7em }
<p>段落です。</p>
<div>レイアウトコンテナです。</div>
<div>二つ目のレイアウトコンテナです。</div>
この宣言が適用されるのは、一つ目のdiv要素だけ
■[] 属性セレクタ
そこに書かれた属性を持つ要素にマッチします
p[class] { margin-top: 0.7em }
<p class="tomato>
class属性 がある p要素 にマッチします(この場合class属性値は何でも良い)。
img[align=left] { margin-left: 3em }
align属性 の値が left の img要素 にマッチ
table[class~=favorite] { margin: 0em 3em }
<table class="favorite second under">
class属性値の一覧にfavoriteという値を含むtable要素
span[lang|=en] { font-style: italic }
ハイフン(-)で区切られた属性値のリストに対応したセレクタです
<span lang="en-US">アメリカ英語</span>
<span lang="fr, en">フランス語のような英語のような。</span>
■, セレクタのグループ化
同じ宣言を持つ複数のセレクタをグループ化したもの
h1, h2, h3 { font-family: sans-serif }
■: フィルタ セレクタの状態を表す
:ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしている がルート要素
:root p { color:#FF0000; }
:not(～)は、指定した条件と一致しない要素にスタイルシートを適用するためのセレクタだ
html:not(:target)
html:not(:only-child:only-child) p { color:#FF0000; }
html:not([lang*=""]) p { color:#FF0000; }
:first-child その要素内の初めの子のみ
:last-child その要素内の最後の子のみ
:nth-child() 任意の数字番目の子、oddなら奇数、evenなら偶数番目など
:nth-last-child()
:before その要素の前に何かを追加する
:after その要素の後ろに何かを追加する
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
} /*IE7以外のモダンブラウザ向け*/
■. クラスセレクタ
class属性の値がwarningであるdiv要素にマッチ
DIV.warning { color:#FF0000; }
■# IDセレクタ
一意（ID型）属性の値がmyidであるp要素にマッチ
p#myid { color:#FF0000; }
