こんにちは!
WEBデザイナーのねこふらいです!


コーディングするたびに思いますが、本当にCSSって素晴らしいですよね!

ぱちぱち打ち込むだけでレイアウトが自在に変わっているさまを見ていると、まるで自分が神様にでもなったかのような高揚感を思い起こさせます!_(┐「ε:)_


冗談はさておき。
CSSには色んなセレクタがあり、これをうまく使い分けることで作業の効率化をはかることができます。

今回はよく使うCSSセレクタをいくつかピックアップしてまとめてみました。

要素 – 指定した要素にスタイルを適応

単純に要素名だけ記述すると、その指定した要素全てにCSSが適応されます。

p{
 color: #333;
}

* – すべての要素にスタイルを適応

*と記述することで、すべての要素にスタイルを適応させることができます。

*{
 font-size: 18px;
}

.クラス名 – 指定したクラスにスタイルを適応

指定したクラス名にスタイルを適応します。クラス名は複数指定ができます。

.className{
 width: 80%;
}

#id名 – 指定したid名にスタイルを適応

指定したid名にスタイルを適応します。

#idName{
 color: red;
}

要素 子孫要素 – 指定した子孫要素にスタイルを適応する

指定した要素の階層下にある子孫要素に対してスタイルを適応します。

p .son{
 background: #ffff00;
}

要素 > 子要素 – 指定した要素の直下の子要素にスタイルを適応

指定した要素の直下にある子要素にのみスタイルを適応します。

li > a{
 color: #ff0000;
}

要素 + 隣接する要素 – 隣接する要素に対してスタイルを適応

指定した要素のすぐ隣りにある要素にスタイルを適応します。

h1 + p{
 color: #999;
}

要素:hover – 要素をマウスオーバーしたときにスタイルを適応

指定した要素をマウスオーバーした時にのみ適応するスタイル。

a:hover{
 color: #eaeaea;
}

要素::before – 指定した要素の直前に擬似要素を作成

指定した要素の直前に擬似要素を作成してスタイルを適応します。

p:before{
 content: "Q";
 display: block;
 width: 60px;
 height: 60px;
 text-align: center;
 font-size: 14px;
 color: #fff;
 background: #ff0000;
}

要素::after – 指定した要素の直後に擬似要素を作成

指定した要素の直後に擬似要素を作成してスタイルを適応します。

p::after{
 content: "new text";
 display: block;
 text-align: center;
 font-size: 14px;
 color: #ccc;
}


以上、ざっとよく使うCSSセレクタをまとめてみました(^o^)
他にもあるのですが、とりあえず私がよく使うものだけ書いてみました。

「セレクタってなにがあるの?」と興味がある方は参考までに!



HOME > コーディング > よく使うCSSセレクタをまとめてみた