cssの基本

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;
}

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