CSSセレクタの解説

セレクタとはスタイルを適用する対象を指定するための記号です。 たくさんの種類がありますが、基本的なものをいくつか解説していきます。   1.ユニバーサルセレクタ *を記述して全てのスタイルに適用するさせることができます。
*{color:red;}
  2.クラスセレクタ .を記述してクラス属性によって指定したクラスにのみスタイルを適用させることができます。
.box{color:red;}
  3.IDセレクタ #を記述してID属性によって指定したクラスのみスタイルを適用させることができます。
#box{color:red;}
  4.子孫セレクタ セレクタどうしを半角スペースで区切ることで要素の中の要素のみスタイルを適用させることができます。
.box .test{color:red;}
  5.子セレクタ セレクタどうしを>で区切ることで要素の直下にある要素のみスタイルを適用させることができます。
.box > .test{color:red;}
  6.隣接セレクタ セレクタどうしを+で区切ることで同じ階層にある要素どうしで、要素の直後に隣接している要素にスタイルを適用させることができます。
.box + .test{color:red;}
  7.関接セレクタ セレクタどうしを~で区切ることで要素の後ろにある要素にスタイルを適用させることができます。
.box ~ test{color:red;}
  8.属性セレクタ 要素名[属性名]の形にすることでその属性を持つ指定要素のみスタイルを適用させることができます。
.box[type"test"]{color:red;}
  9.型セレクタ 要素名のみでスタイルを適用させることができますが、同名の全ての要素にスタイルが適用してしまいます。
h1{color:red;}
   

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です