creatersnest

あまり知られてないけど実は便利なCSSセレクタまとめ


cssのセレクタって多すぎて知っているつもりでも、
意外とわかってなかったりするセレクタってありますよね。

 

今回はおさらいも兼ねて、 基本的なものから
意外と知られていないセレクタまでいろんなcssセレクタをご紹介します!

 

基本編

*
すべての要素にスタイルを適用します。

 

.X
クラス名を指定した要素にスタイルが適用されます。

次のような指定方法もすることができます。

クラス名「test」がついたspan要素にのみスタイルが適用されます。

 

#X
指定したid名がる要素に適用されます。
基本的には「.」とほぼ同じですが、
idの場合1つの要素にしか 適用されないので注意です。

 

E F
セレクタを半角スペースで区切ると、
ある要素の下の階層にある要素にスタイルを適用します。

 

 

E > F
セレクタを「>」で区切ると、
ある要素の直下階層にある要素にスタイルを適用します。

クラス名「test」の直下にあるa要素にのみ適用されます。

 

E + F
「+」で隣接している要素にスタイルを適用することができます。

 

 

E ~ F
「~」である要素の後にある要素にスタイルを適用します。

 

 

擬似要素・擬似クラス

:first-letter
要素の最初の文字にスタイルを適用します。

サンプル

 

E:nth-of-type(n)
n番目に現れる要素にスタイルを適用します。
サンプル

またnの部分は以下のように複数指定することができるので 便利です。
サンプル

 

E:nth-last-of-type(n)
後ろから数えてn番目の要素にスタイルを適用します。
n部分の使用方法はnth-of-type(n)と同じです。
サンプル

 

E:not(s)
指定したセレクタに該当しない場合にスタイルが適用されます。
サンプル

 

 

属性セレクタ

E[foo]
特定の属性を持つ要素にスタイルを適用します。

tittle属性を持つaタグにスタイルを適用します。値は関係ありません。

 

E[foo=”bar”]
特定の属性、値を持つ要素にスタイルを適用します。

tittle属性に「sample1」という値を持つa要素にスタイルを適用します。

 

E[foo^=”bar”]
属性の値が指定した文字で始まる場合にスタイルが適用されます。

tittle属性が「テスト」で始まる場合にスタイルを適用します。

 

E[foo$=”bar”]
属性の値が指定した文字で終わる場合にスタイルが適用されます。

tittle属性が「テスト」で終わる場合にスタイルを適用します。

 

E[foo*=”bar”]
属性の値が指定した文字を含む場合はスタイルを適用します。

tittle属性が「サンプル」を含む場合にスタイルを適用します。

 

 

その他

max-width
要素の最大幅を指定します。
リサイズが可能な要素やwidthに%指定をした時に使用します。
サンプル

 

min-width
要素の最小幅を指定します。
その他max-heightやmin-heightもあります。
メディアクエリを用いたレスポンシブデザインで活躍します。
サンプル

 

pointer-events
マウスイベントを制御します。
値にnoneを指定するとイベントを拾わなくなります。
画像を組み合わせたりするデザインや
before after擬似要素のマウスイベントを剥がすのに便利です。

 

font-smoothing
SafariやFirefox向けのアンチエイリアス処理を指定します。
以前筆者がスマホ向けのサイトを作った時に
お世話になったセレクタです。
animationでフォントがチカチカ(ピクピク)なる場合は
このセレクタで解消する可能性があります。

 

まとめ

如何だったでしょうか。
基本的なものからあまり使わないようなセレクタまで
本当にたくさんの種類があります!

 

気になったものがあればどんどん活用して、
使い方を覚えていきましょう!

 

以下のサイトを参考にしました。
サンプルなども記載されているので気になった方は確認してみてください!
W3C(英語):http://www.w3.org/TR/css3-selectors/
CSS3リファレンス:http://www.htmq.com/css3/index.shtml

 

実装時にはベンダープレフィックスにご注意を!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleスマホサイトを作るときの適切なviewport設定方法