CSSのセレクタ

CSSは、どこに対してスタイルを適用するかを明確にしなければなりません。インラインでCSSを記述する場合は適用したい箇所に直接記述しましたがそうすると同じスタイルを適用したい場合に全ての箇所で同じ記述しなければなりません。その場合はスタイルに名前を付けて、そのスタイル名が呼び出したらスタイルを適用できるようにします。
前回は、セレクタとしてはタグ名だけでしたがCSSのセレクタは、「idセレクタ」と「classセレクタ」を最もよく使います（実際は組み合わせて複合的に使います）。

CSSの要素名（タグ名）セレクタ

前回使用しましたが、要素名がそのままセレクタになります。

CSSの属性セレクタ

属性をセレクタとして扱います。

CSSのidセレクタ

idセレクタは、要素の属性として記述します「id=”content”」。
ひとつのページに同じid名を複数指定できないので「ヘッダー」や「メニュー」など、場所と用途を決めておきたいものに対してなど、設計上一つしか存在ない部品に使うことが多いです。
idセレクタをCSSに記述する時は頭に「#」を付けます。

CSSのクラスセレクタ

classセレクタは、要素の属性として記述します「class=”red_bold”」。
ページ内に何か所あっても適用できます。
idセレクタをCSSに記述する時は頭に「.」を付けます。

組み合わせたセレクタ

セレクタは、複数のセレクタを記述することで階層構造の要素に対してスタイルの適用が出来ます。

子孫セレクタ

セレクタを半角スペースで区切ると、下の階層にある子孫要素にスタイルを適用できます。
セレクタセレクタ {プロパティ名:値;}

子セレクタ

セレクタを“>”で区切ると、その直下の階層にある子セレクタにスタイルを適用できます。
セレクタ>セレクタ {プロパティ名:値;}

隣接セレクタ

セレクタを“+”で区切ると、同じ階層にある要素同士で、その直後に隣接している要素にスタイルを適用できます。
セレクタ+セレクタ {プロパティ名:値;}

関節セレクタ

セレクタを“~”で区切ると、ある要素と同じ親要素に属する後続に出現する要素にスタイルを設定できます。

擬似クラス

リンクにカーソルが乗ったり、クリックされた場合のスタイルを変化させるには、擬似クラスを使用します。文字色・背景色・下線などを指定することで、動的な変化をつけることができます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

<style>
a:link { color: blue; }
a:hover { color: red; }
a:active { background-color: yellow; }
</style>
</head>
<body>
<h1>擬似クラスのテスト</h1>

<a href="https://cyber-genjin.net">サイバー原人</a>

</body>
</html>

<!doctype html>

<html>

<head>

<style>

a:link { color: blue; }

a:hover { color: red; }

a:active { background-color: yellow; }

</style>

</head>

<body>

<h1>擬似クラスのテスト</h1>

<a href="https://cyber-genjin.net">サイバー原人</a>

</body>

</html>

:link擬似クラス

未訪問リンクのスタイルを指定します。

a:link { color: blue; }

1	a:link { color: blue; }

:hover擬似クラス

要素にカーソルなどが乗った際のスタイルを指定します。 a:hoverでは“カーソルは乗っているがクリックはされていない状態”です。

a:hover { color: red; }

1	a:hover { color: red; }

:active擬似クラス

要素がアクティブになった際のスタイルを指定します。 a:activeでは“クリックされてから離されるまでの状態”です。

a:active { background-color: yellow; }

1	a:active { background-color: yellow; }

「HTML & CSS」の一覧を表示する