コーディング作業が楽になるCSS3で定義されているセレクタと擬似クラス

2014年09月28日
follow us in feedly

cssの基本

monitor2-compressor

HTML文書にレイアウトやデザインといったスタイルを指定するための言語をCSSと言います。

そのCSSの基本的な書式は次のようなものです。

p { background-color: black; }

pがセレクタと呼ばれるスタイルを適用する対象です。上の例では<p>タグにスタイルを適用するということになります。background-colorが指定するスタイルの性質でプロパティと呼びます。background-colorは背景色ですね。blackの部分がプロパティに応じたになります。値はプロパティごとに使える文字列は決まっています。

このようにCSSはセレクタ、プロパティ、値で構成されていますが、スタイルを適用する対象となるセレクタには様々な種類があり、セレクタ(擬似クラス)を上手く使い分けるとwebサイト制作におけるコーディング作業が効率よく進みます。

CSS3で定義されている知っていると便利なセレクタ

要素名[属性名$=”値”]

属性の値が指定した文字列で始まっている要素にスタイルを適用するセレクタ

a[href^="https"] {
  color: black;
}

要素名[属性名^=”値”]

属性の値が指定した文字列で終わっている要素にスタイルを適用するセレクタ

a[href$=".html"] {
  color: black;
}

要素名[属性名*=”値”]

属性の値に指定した値の文字列を含む要素にスタイルを適用するセレクタ

a[href*="aaa"] {
  color: black;
}

CSS3で定義されている知っていると便利な擬似クラス

擬似クラスは要素の特徴などセレクタでは表せない状態に対してスタイルを適用できます。

要素名:target

id属性を利用してページ内リンクを設定した場合に、移動先の要素にスタイルを適用します。

h2:target {
  color: red;
}

要素名:nth-child()

同じ親要素を持つn番目の子要素にスタイルを適用します。nは0以上の整数を表します。ですから奇数は「2n+1」、偶数は「2n」で指定できます。奇数は「odd」、偶数は「even」を引数に指定することもできます。

li:nth-child(2n+1) {
  color: red;
}

要素名:nth-of-type()

同じ親要素を持つn番目の子要素にスタイルを適用します。nth-child()との違いは要素名に指定した要素だけを数えてスタイルを適用します。間にli要素以外の要素があってもそれは飛ばしてカウントします。

li:nth-child(2n+1) {
  color: red;
}

要素名:empty

<th></th>のように要素内容を持たなかったり、子要素を持たない要素にスタイルを適用するセレクタ

th:empty {
  background-color: black;
}

他にも細かいセレクタや擬似クラスがありますので、調べてみると面白いですよ。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ