CSSの高度な書き方

--

セレクタとは、何処にスタイルを適応するか示したものです。
下記は、HTMLのbodyタグのスタイルを指定したもので文字の色を赤に設定します。 セレクタ名 { } で囲みます。改行があっても無くても構いません。 --

下記のようにカンマ , で区切ってセレクタ名を付けることで同じスタイルを body , h1 , h2 それぞれに適応します。

body,h1,h2{
     color: #ff0033;
}

--

HTMLやXMLは、親子関係で成り立っています。
下記の例では、<em>タグは、<p>タグの子になります。逆に<p>タグの親が<em>タグになります。
これは、タグであってもクラスやIDでも同じことが言えます。

     オンラインCSSエディタは、ブラウザ上で使えるCSSエディタだ。

セレクタを半角スペースで区切ることで親子関係を指定することができます。

p em{
      color: #ff0033;
}

これで <p> から </p>の間にある<em>のスタイルを指定できます。
特定の場所のみ独立させたスタイルにしたい場合などに使います。 --

セレクタは、HTMLのタグ、クラス、IDで指定します。
--

要素名のみを指定したセレクタです。
下記の例は、bodyタグにスタイルを適応する例で最も基本形となります。

body {
      color: #ff0033;
}

--

* (アスタリスク)をセレクタにすることで全ての箇所のスタイルを一括指定できます。
例えば、ブラウザによってデフォルトのマージン（余白）が異なったりするので一番最初に
ユニバーサルセレクタ * を使って全ての余白を0にしておく、全てのタグの文字サイズを予め統一しておく目的で使います。

* {
      color    : #ff0033;
      font-size: 10pt;
}

--

HTMLのタグの属性に class というのがあります。
このclassに指定した名前を使ってスタイルを設定することができます。

      クラスは、複数回使うことができるのでスタイルの統一に役立つ。

クラスは、divタグやpタグ、spanタグでスタイルを適応させたい範囲を囲むのが基本です。
上記の例では、class="sample" としましたから、これにスタイルを適応させるには、
次のように、 . ←先頭にドットを付けてセレクタを記述します。

.sample {
      color: #ff0033;
      font-size: 10pt;
} 
		

クラスは、ページ内で何回でも使うことができます。
--

クラスセレクタと同じような考え方ですが、異なる点は、ページ内でIDは、一つだけということです。
クラスが複数人を表すならIDは、複数人の中の一人を表すものです。
単純にスタイルのみを指定するならクラスセレクタを主に使うと良いでしょう。
HTMLでの記述例は、下記のようにします。

      idセレクタは、ページ内で一回しか使うことができない。

スタイルシートの記述例は、次のように # をセレクタの先頭に記入します。

#sample {
      color: #ff0033;
      font-size: 10pt;
}

--

要素へ属性に分別できない性質や状況は、疑似クラスとして定義されています。
例えば、リンクの上にマウスポインタを乗せるとリンクの色が変化する仕組みは、疑似クラスを使います。 具体的には、下のサンプルのようなことです。 書き方は、セレクタ:疑似クラスとします。

a:hover{
      color: #ff0033;
}

主な疑似クラス

疑似クラス名	用途
hover	マウスポインタが上に来た時
active	要素を選択（クリック）した時
focus	要素にフォーカスが移った時
link	開いていないリンク
visied	開いたリンク

-

あるクラスが指定されている要素のみにスタイルを適応するには、次のようにします。
aタグでglobalmenuRootクラスが適応されているものにポイントした時に色を変える例です。

a.globalmenuRoot:hover{
      color: #ff0033;
}