■* 全称セレク繧?
すべての鐔??素
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; }
======================
■疑似鐔??素
セレクターに臀??荳?し要素の特藹??の部分にスタイル臀??けができる、CSS2文法で縺?:だったがCSS3縺?::になったものも
疑似鐔??素の臀?? （::first-letter, ::first-line, ::before, ::after etc.)
疑似クラスの臀?? （:link, :hover, :visited, ,:active, nth-child(n), nth-of-type(n), :not() etc.）
a::after {
content: "→";
}