CSSセレクター

セレクターにはタグや id・class 以外にも、指定する方法があります。

全称セレクター

すべてのセレクターをまとめて指定したいときは全称セレクターと呼ばれる *を使います。

*{color:#000;}

このように記述すると、すべての要素に対してfont-size:16が設定されます。

複数のセレクター

2つ以上のセレクターを指定したいときは , で区切ることで指定できます。

h1,h2,h3{font-weight:bold;}

子孫セレクター

2つ以上のセレクターを半角スペースで区切ると、下の階層の子孫要素を指定することができます。

ullia{color:#f00;}

子セレクター

2つ以上のセレクターを > で区切ると、直下の階層の子要素を指定することができます。

ul>li>a{color:#00f;}

※ 子孫セレクターと子セレクターは微妙に指定できる要素が違います。子孫セレクターは親要素の中にある子要素全てに対して指定することができます。子セレクターは親要素の直下の子要素しか指定することができません。

※ CSSでは親子関係になっているセレクターの「子」を指定することはできますが、「親」になっている部分を指定することはできません。

隣接セレクタ

2つ以上のセレクターを + で区切ると、直後にあるセレクターを指定することができます。

p+div{width:100px;}

※直後にあるセレクターを指定することはできますが、直前にあるセレクターを指定することはできません。

擬似クラス

擬似クラスとは、選択されたセレクターが特定の状態を指定するものです。例えばマウスのカーソルが上に乗っているときだけ色が変わるボタンをよく目にすることがありますが、これは擬似クラスの:hoverという状態を指定して記述することができます。擬似クラスは :◯◯ のような形で、◯◯にはその状態が記述されます。

hover

マウスカーソルが上に重なった状態の時を表すのがhoverです。

a:hover{color:#f00;}

linkとvisited

linkは未訪問、visitedは訪問済みのリンクを指定するものです。<a>に指定するもので、何も指定をしていないと未訪問は青、訪問済みは紫になっています。

a:link{color:#f00;}a:visited{color:#0f0;}

first-child・last-child・nth-child()

兄弟要素の◯番目を指定できる擬似クラス。first-childは一番最初、last-childは一番最後、nth-childは () 内に数字を入れると指定することができます。nth-childに関しては偶数（even）・奇数（odd）・倍数（n）が指定できます。

ulli:nth-child(3){color:#0f0;}

疑似要素

疑似要素は選択したセレクターの特定部分を整形して表示するためのものです。擬似クラスと同じく:◯◯というふうに記述します。

first-letter

最初の1文字目を変化させることができる疑似要素です。

p:first-letter{color:#ff0;font-size:40px;}

before・after

要素の直前と直後に擬似要素を作成します。プロパティにはcontentというものを用意して、内容を書き込みます。

p:before{content:"直前の疑似要素";color:#0f0;}p:after{content:"直前の疑似要素";color:#0f0;}

属性セレクタ

HTMLタグの中には「属性」と呼ばれる部分があります。例えば<img src="hoge.jpg" width="300" height="300" alt="hogehoge">の中の、src="hoge.jpg" width="300" height="300" alt="hogehoge"の部分は属性にあたります。

この属性の部分を指定することができるのが属性セレクタです。例えば<a href="#" target="_blank">というHTMLタグがあったときに、ページの中でtarget="_blank"となっている<a>を指定したいときは以下のように記述します。