継続は力なり#9
CSSの適用先の指定方法
セレクタ→CSSをどの要素に適用するかを指定する
これまでは、「セレクタ→要素名」だったが他にも種類がある
タイプセレクタ
要素名をそのまま使って指定(要素の種類で指定)
例
HTML
<h1>これはh1要素です</h1>
<h2>これはh2要素です</h2>
<h3>これはh3要素です</h3>
CSS
h1 { color: red; }
h2 { color: black; }
h3 { color: blue; }
このように「h1」と要素名で指定しているものをタイプセレクタという
ユニバーサルセレクタ
要素名の代わりに「 * 」を指定して、全ての要素に適用する
例
HTML
<h1>これはh1要素です</h1>
<h2>これはh2要素です</h2>
<h3>これはh3要素です</h3>
CSS
* { color: red; }
クラスセレクタ
class属性に特定の値が指定されている要素が適用対象
1「要素の名前」か「 * 」を書く
(・特定の要素に限定する場合→要素の名前
・要素を特に限定しない場合→「 * 」 )
2直後にピリオド( . )をつけ、class属性の値を指定
「 * 」の直後に何か続く場合、「 * 」を省略できる
例
p.sample {・・・}
→class="sample"が指定されてるp要素に適用
*.sample {・・・}
→class="sample"が指定されてる全ての要素に適用
.sample {・・・}
→「 * 」を省略した書き方
class属性の値は半角スペースで区切って複数指定できるが、
この指定方法では指定された値が複数の値のうちどれか一つと
合致すれば適用される
例
HTML
<p>これはp要素です</p>
<p class="abc">これはp要素です</p>
<p class="abc def ghi">これはp要素です</p>
<p>これはp要素です</p>
CSS
.abc { color: red; }
IDセレクタ
id属性に特定の値が指定さえれている要素が適用対象
IDセレクタの場合は「 . 」ではなく「#」を使用
「 * 」は省略可
半角スペースで区切って複数の値を指定できない
例
p#sample {・・・}
→id"sample"が指定されているp要素に適用
*#sample{・・・}
→id"sample"が指定されている全ての要素に適用
#sample{・・・}
→「 * 」を省略した書き方
例
HTML
<p>これはp要素です</p>
<p id="abc">これはp要素です</p>
<p>これはp要素です</p>
<p>これはp要素です</p>
CSS
#abc { color: red; }
擬似クラス(class属性とは関連なし)
ある要素が特定の状態にある時に限定して適用
例として、同じ「a要素」でも
・リンク先をまだ見ていない状態
・リンク先を既に見ている状態
上記の二つで色を変えることができる
20種類ほどあるが主に使うのが以下4つ
・要素:link
→リンク先をまだ見ていない状態のa要素
・要素:visited
→リンク先を既に見た状態のa要素
・要素:hover
→カーソルが上にある状態の要素
・要素:active
→マウスのボタンなどが押されている状態の要素
上記の「要素」の部分には、
「名前の要素」か「 * 」を指定(「 * 」は省略可)
「:link」・「:visited」は「a要素」だけを対象
「:hover」・「:active」は「a要素以外にも」使用可
※「:hover」はカーソルがあることが前提なので、スマートフォンやタブレット端末では指定が無効になる
擬似クラスの指定順序
同時にそのようになり得るものが含まれており、その場合CSSでは
「後の指定だけが有効」になる(前指定は後指定に上書きされる)
例として「:link」と「:visited」は同時に起こり得ないが、
「:hover」と「:active」は他の状態と同時になり得る
もし「:hover」や「:active」の後に「:link」や「:visited」があると
「:hover」や「:active」は常に「:link」や「:visited」に上書きされて表示が無効になってしまう
よって「:hover」と「:active」は「:link」と「:visited」の後に表示
指定しなくてはならない
また、「:active」の後に「:hover」があると「:hover」の表示指定の方が有効になってしまい「:active」が常に無効になる
1「:link」と「:visited」の指定
2 その後にそれを上書きするように、「:hover」と「:active」を指定する
これら4つの擬似クラスの指定は常に以下のサンプルと同じ順で行う
例
HTML
<p>ここはp要素の内容です。
<a href="../0615/index.html">この部分はa要素です。</a>
ここはp要素の内容です
</p>
CSS
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
結合子
セレクタを( , )で区切ると適用先を複数選択
セレクタを「半角スペース」で区切って複数並べると
「左側の適用対象」に含まれる「右側の適用対象」に表示指定が適用
半角スペースで区切るセレクタは幾つでも適用可能
例として
・「h1 em」は「h1要素」の中の「em要素」だけに適用
(p要素の中のem要素には適用されない)
・「body.top h1 em」は「class="top」が指定されている「body要素」に含まれる「h1要素」にさらに含まれる「em要素」だけに適用
例
HTML
<h1>これは<em>1要素</em>です。</h1>
<p>これは<em>p要素</em>です。</p>
<p>これは<em>p要素</em>です。</p>
CSS
h1 em {
color: red;
font-style: normal;
}