CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

  • あとで読みたい人は…

こんにちは、@cappeeです。

CSSについてwebデザイナーとやり取りしたり調べものをしているとこんがらがってくる言葉、「セレクタ」「プロパティ」「疑似要素」「疑似クラス」について改めてまとめてみました。

意外と間違えて使っていることがあるかもしれませんよ。後輩からぷぷっと思われないように基本もしっかりおさらいしておきたいと思います。

CSSセレクタとは

CSSセレクタとはスタイルを適用する場所を指定するもので、クラス名やID名などもセレクタの一つになります。
下記のような例はすべてCSSセレクタです。

  • * { }
  • div { }
  • .class { }
  • #id { }
  • a:hover { }
  • li:first-child { }
  • a[href^="http"] { }

こちらも参考にしてください。
意外と知らない!?CSSセレクタ20個のおさらい

属性セレクタ

属性セレクタとはHTMLの属性を指定するセレクタです。例えば、属性には href や target などがあります。

下記のように指定すれば target 属性に _blank を含む a タグにスタイルを適用できます。別ページで開くアイコンなどをつける場合に使えますね。

a[target*="_blank"] {
background:url(/img/blank.png) no-repeat right center;
padding-right:10px;
}

属性セレクタには今回ご紹介したものを含み下記のようなものがあります。

  • foo属性の値にbarを含むE要素 … E[foo*="bar"]
  • foo属性の値がbarで始まっているE要素 … E[foo*="bar"]
  • foo属性の値がbarで終わっているE要素 … E[foo$="bar"]

CSSプロパティとは

CSSプロパティとは float やcolor などのスタイルの設定ことを言います。言い方でCSSを書くとこんな感じです。

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

去年の終わり頃少し話題になったこちらで面白くプロパティを勉強するにもいいと思います:)
一番強いCSSプロパティ決めようぜ 結果発表!

疑似クラスとは

よく使う :hover や :link も疑似クラスです。:first-child やCSS3から追加となった :last-child、nth-child も含みます。

:first-child は要素の最初を、:last-child では要素の最後にスタイルを適用することができ、リスト表示のデザインにとても便利です。

nth-child を使えば特定の順番を指定したり、繰り返しスタイルを適用することもできます。

詳しい使い方はこちらでご紹介してますのでぜひご覧ください。
CSSで要素の最初と最後、または繰り返しスタイルを適用する擬似クラス

疑似要素とは

:first-letter や :first-line、:after や :before などが疑似要素にあたります。

:first-letter は要素の1文字目だけにスタイルが適用され、:first-line は要素の1行目だけにスタイルが適用されます。
:first-letter を使用すると雑誌とかでよくみる1文字目だけ文字を大きくする、なんてことも疑似要素だけで実現可能です。

:after や :before は、要素の前後に文字や画像を追加することができる疑似要素です。
属性セレクタも使って、リンクされたaタグにアイコンを表示するCSSを書いた場合はこちらのようになります。

a[href]:before {
content : url(/img/arrow.png) ;
}

過去の記事でも疑似要素を使ったCSSについて書いていますのでぜひご覧ください。

CSSだけでリストや横並びの区切り線を実現するパターン4つ
1つの要素にCSSだけで二重ボーダーをつける3つの方法
リストやお知らせ系の一覧で上下にボーダーを引きたい場合のCSS

疑似クラスと疑似要素の違い

疑似クラスや疑似要素の記述は、どちらもセレクタ(要素名)のあとにコロン(:)をつけます。

疑似クラスと疑似要素の違いですが、疑似クラス(:first-child や :last-child)は要素全体を選択し、疑似要素(:after や :before)は要素の一部を選択しているのが大きな違いになります。

私もよくこんがらがってしまいます。。そんな時は、下記も参考にしてみてください。
CSSの疑似要素と疑似クラスをもう一度最初から

CSSの間違いやすい言葉まとめ

上記で説明したものはCSSの記述で言葉を表してみるとわかりやすいですね。とても完結になりました。

セレクタ:疑似クラスや疑似要素 {
プロパティ:値;
}
Pocket
article clipper CSSの間違いやすい【セレクタ/プロパティ/疑似クラス/疑似要素】をまとめてみる

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>