セレクタを省略「セレクタ、クラス名、プロパティ、値」の記述方法‐HTML・CSSを学ぶ

 基本的なスタイルシートがページ内の要素の一部に効果が及ぶ記述方法は「セレクタ、クラス名、プロパティ、値」と言う記述方法でした。

今回はこのセレクタの記述方法で応用編と言えるかわかりませんが(笑)色々な記述方法があり、また省略できたりしますので、その使用方法について説明します。

スタイルシートがページ内の要素の一部に効果が及ぶ記述方法は下記

スタイルシートの記述「セレクタ、クラス名、プロパティ、値」の記述方法‐HTML・CSSを学ぶ

セレクタを記述した記述方法

以下に例をあげて違いを見ていきます。

スタイルシートがページ内の全体に効果が及ぶ記述方法

p{color:darkblue;}　　　/* p要素に対しスタイルを適用 */

スタイルシートがページ内の要素の一部に効果が及ぶ記述方法

p.c1{color:darkblue;}   /* クラス.c1の付いたp要素に対しスタイルを指定 */

異なる複数の要素に対しクラスを指定した記述方法

p.c1,div.c1{color:darkblue;} 　　　/* p要素とdiv要素に対しクラスc1を指定 */

/* 複数の時は,カンマで区切る */

一種類のクラス名が付いた全ての要素に対し効果が及ぶ記述方法

例えば、クラスc1が付加された全ての要素に対し指定する場合、クラス名の前に*を付加することで全ての要素を指定することができる。つまり*は全ての要素を指定することができます。

*.c1{color:darkblue;} 　　　/* クラスc1の付いた全ての要素を指定 */

セレクタを省略した記述方法

上記の*.c1の記述方法で、*は省略できます。つまり省略すると全ての要素に対して指定することになります。

.c1{color:darkblue;} 　　　/* クラスc1の付いた全ての要素を指定 */

複数のクラスがある場合の記述方法

.c1{color:darkblue;}

.c2{background-color:red;}

これは以下のように一つのクラス名にまとめて記述できます。

.c1{color:darkblue; background-color:red;}

また、二つのクラス名を繋げて記述することもできます。

.c1.c2{clor:darkblue;  background-color:red;}

HTMLの要素にスタイルシートを指定する

<div class="c1">ここに文字を入力します</div>

<p class="c1">ここに文字を入力します</p>

セレクタが複数ある場合、その両方のスタイルを指定する。

<p class="c1 c2">ここに文字を入力します</p>

沢山の記述方法があり、タグがあり要素があり、スタイルシートがありで、何か頭の中が混乱していますが、毎日地道にコツコツと少しずつ前進するしかないですね。ふ～～疲れた(笑)