2017年7月26日(水)
スタイルシートのセレクタ #HTML5&CSS3&JavaScript 先の２つは、多分これからHTML5を勉強しようと志しておられる方からのご質問を受けて、回答させて頂きました。
このブログは,、別の次元と考えて下さい。
HTML5で記述した内容に、色や文字サイズ等の修飾を指定するのがCSS3 [Cascading Style Sheets, level 3]（スタイルシート）です。
スタイルシートの記述方法は３つあります。
（１）直接、タグの属性として記述する方法
--
<p style="color:red;">赤色の段落</p>
--
（２）間接的に、<style>～</style>に記述する方法
<style>～</style>は、通常<head>～</head>内に記述しますが、意図的に<body>～</body>内に記述することもあります。
--
<html>
<head>
<style>
p {color:red;}
</style>
</head>
<body>
<p>赤色の段落</p>
</body>
</html>
--
（３）別のファイルに記述したものを呼び込む方法
（２）<style>～</style>内を、別ファイルに記述して、これを呼び込みます。
-- html5.css --
p{color:red;}
--
--
<head>
<link rel="stylesheet" href="html5.css">
</head>
--
前置きが長くなりました。ここからが本題です。
スタイルシートの基本は、修飾する部分を指定して、修飾を記述します。修飾する部分をセレクタ[Selector]と呼びます。セレクタの指定方法において、知らないものに出くわしたので、深く勉強したいと思い、使えそうなものを整理してみました。なお、下記のリンク先は大変詳しいので、参考にしてみて下さい。
１．要素セレクタ
タグの要素名を指定します。最も基本的なセレクタです。
要素名{プロパティ:値;}
--
body{font-size:12pt;}
p{color:red}
--
２．IDセレクタ
タグの属性として記述したIDを指定します。ガレコレでは、ID名にわざわざID_を付けています。プログラミングでは、name、class、id等の属性があり、ややこしいからです。なお、ID名は唯一なもので、同一ファイル内の記述で重複してはいけません。
#ID名{プロパティ:値;}
--
#id_red{color:red;}
～
<p id="id_red">赤い段落</p>
--
３．クラスセレクタ
クラスとは、一まとめ毎に名札を付けたもので、同じ名札のクラスを一括で指定できます。
.クラス名{プロパティ:値;}
要素名.クラス名{プロパティ:値;}
--
.red{color:red;}
div.red{background-color:red}
～
<p class="red">赤い段落１</p>
<p class="red">赤い段落２</p>
<div class="red">赤い背景</div>
--
４．疑似クラス
状況に対して指定します。要素名に続けて記述します。
--
a:link {color:blue;}
a:visited{color:purple;}
a:hover {color:gold;}
a:active {color:red;}
～
<a href="
http://neconote.jp">ガレコレ</a>--
・・・続きは、今晩。。。
https://www.marguerite.jp/Nihongo/WWW/RefCSS/Selectors/index.html
お問い合わせ