見出し画像

継続は力なり＃９

うちやましょうたろう/成り上がり

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>これはh１要素です</h1>
<h2>これはh２要素です</h2>
<h3>これはh３要素です</h3>

CSS

* { color: red; }


クラスセレクタ

class属性に特定の値が指定されている要素が適用対象
１「要素の名前」か「 * 」を書く
（・特定の要素に限定する場合→要素の名前
　・要素を特に限定しない場合→「 * 」　　　）
２直後にピリオド（ . ）をつけ、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」が常に無効になる

１「:link」と「:visited」の指定
２  その後にそれを上書きするように、「: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>１要素</em>です。</h1>
<p>これは<em>p要素</em>です。</p>
<p>これは<em>p要素</em>です。</p>

CSS

h1 em {
   color: red;
   font-style: normal;
}