2

これはマスターしたい!と思ったCSS3のセレクタ厳選15個


CSSの記述は「セレクタ」「プロパティ」「値」の3つを使って記述します。

いつも使いこなしているのは
「.」「*」「#」などを含む数種類だけではないですか?
セレクタにはたくさんの種類があり、

ちゃんと使いこなすことができれば、
余分なclassやidを減らす事ができ
htmlのソースもぐっと整理され綺麗になります!

 

:link

要素名:link {プロパティ名:;}

未訪問のリンクにスタイルを適用します。
文字下のアンダーバーを消す際は
text-decoration:none;を記述することをお忘れなく!

 

 :visited

要素名:visited {プロパティ名:;}

訪問済みのリンクのスタイルを指定します。

 

:hover

要素名:hover {プロパティ名:;}

要素にマウスなどのカーソルが乗った際のスタイルを指定します。

 

:active

要素名:active {プロパティ名:;}

要素がアクティブになった際のスタイルを指定します。
hoverがマウスが乗っているが、クリックされていない状態で、
activeはクリックされてから離れるまでの状態です。

 

:focus

要素名:focus {プロパティ名:;}

フォーカスされている要素にスタイルを適用します。
主にフォームに利用されており、
boxshadowと組み合わせるとより
美しいフォームデザインを実装することができます。

 

:first-child

要素名:first-child {プロパティ名:;}

要素内の最初の子要素にスタイルを適用します。

 

:first-line

要素名:first-line {プロパティ名:;}

要素の最初の行にスタイルを適用します。
インライン要素には適用されないので注意が必要です。

 

:first-letter

要素名:first-letter {プロパティ名:;}

ブロックレベル要素の最初の文字を対象にスタイルを適応します。
インライン要素には適用されないので注意が必要です。

 

E:nth-child(n)

スクリーンショット 2015-06-13 1.42.04
E:nth-child(n) {プロパティ名:;}

n番目の子となるE要素にスタイルを適応します。
n部分には単純に数字を指定するだけではなく、
奇数・偶数のほか数式も指定することができます。
ループ処理と組み合わせることで縞模様のテーブルが簡単に作成できます。

テーブルデモページはこちら

 

E[foo^=”bar”]

E[foo$=”bar”] {プロパティ名:;}

foo属性の値がbarで指定した値で終わる
E要素に対してスタイルが適応されます。

 

子セレクタ

セレクタ>セレクタ {プロパティ名:;}

セレクタを>で区切ると、直下階層にある子セレクタを対象に
スタイルを適応することができます。

 

 

隣接セレクタ

セレクタ+セレクタ {プロパティ名:;}

セレクタを+で区切ると、直後に隣接している要素に
スタイルを適用することができます。

 

E:enabled

ユーザーインターフェース

E:enabled {プロパティ名:;}

有効となってるフォームなどの
ユーザーインターフェース要素にスタイルを適用します。

 

E:disabled

E:disabled {プロパティ名:;}

無効になっている
ユーザーインターフェース要素にスタイルを適用します。

 

E:checked

サンプル
E:checked
{プロパティ名:;}

チェックされている
ユーザーインターフェース要素にスタイルを適用します。
ラジオボタンやチェックボックスなどで、
要素にチェックを淹れてある場合にスタイルが適用されます。

 

E:not(s)

E:not(s) {プロパティ名:;}

sで指定するセレクタに当てはまらない要素にスタイルを適用します。

 

まとめ

古いPCブラウザには対応してないこともありますが、
スマートフォンのブラウザには対応しているセレクタがほとんどです。

セレクタを活用してよりスマートなコードを記述してみましょう!
より詳しい内容やサンプルコードは以下のサイトを参考にしてください。
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【実践】CSSだけでボタンのロールオーバーをデザインしてみよう!