クラスセレクターの基本をおさえよう【CSSを書いていこう】

目次

クラスセレクターを使った指定方法について確認していきます。

  • クラスセレクター

クラスセレクター

前回は一括指定プロパティについてみてきました。

詳しくは『一括指定プロパティを使ってみよう【CSSを書いていこう】』を御覧ください。

今回はクラスセレクターについて見ていきます。

セレクターとはh1やpなどどこにスタイルをつけるのかを指定する要素のことです。

クラスセレクターはHTMLの要素名に更にオリジナルの名前をつけてその名前で要素を選択する手法でこれがないと複数の要素があった場合その要素名のタグをすべて選択することになってしまうのでしっかりと覚えていきましょう。

例えば同じ階層にpタグが2つあったとし、あとの要素は青い文字でスタイリングしたい場合に2つ目のpタグにクラスセレクターをつけてあげましょう.

どうするかっというとHTMLのファイル内にある要素の開始タグにclass属性をつければおkで開始タグのあとにclass属性を付け””(ダブルクォーテーション)で囲った中に自分の死期な名前を英語表記で書いていきます。

具体的には<p class=“info”>というように指定してあげればいいでしょう。

また、クラスセレクターをCSSファイルで呼び出す場合はクラス名の前に.(ドット)をつければおkです。

具体的には.info {}としてあげて中に宣言を入れていけばその要素が宣言どおりに挙動してくれます。

セレクターの使い方については追々詳しくやっていきたいと思っています。

以上





この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次