開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

CSSセレクタの種類を理解する。+ (プラス)、> (不等号)、疑似クラス、疑似要素、他。

最終更新:2017-05-07 by Joe

CSSセレクタにはいくつか種類がありますので、すべてはかけませんが、代表的なものをかいつまんでご紹介します。

クラス、IDによるセレクタ

通常のセレクタの記述方法です。クラスは「.(ドット、ピリオド)」、IDは「#(シャープ)」を頭文字とすることでセレクトできます。

IDは、ページ内に同じIDが存在すると衝突してしまい、ただしく動作しなくなってしまいます。一方で、クラスは、複数の要素に同じクラスを割り振る事ができますので、同じスタイルを複数の要素に割り当てたい時に便利です。

上記の理由から、一般的に、クラスでセレクトすることの方が多いです。クラスとIDは、役割が似ていますが、これはHTMLの内部構造的な、かつ歴史的な問題ですので深く考える必要はないです。

セレクタのグルーピング:カンマ

「, (カンマ)」を使うことで、グルーピングができます。

子孫セレクタ: スペース

子供セレクタ:>(不等号)

隣接セレクタ:+(プラス)

「その後にすぐ続く」という条件になります。セレクトされるのは最後要素です。

疑似クラス:nth-child

1〜nの数字で、n番目の子供をセレクトできます。

疑似クラス:first-child, last-child

最後の子供をセレクトできます。

否定クラス:not

一致するクラスを除外してセレクトできます。

疑似要素:before, after

擬似的に要素を挿入できます。デフォルトではインライン要素であることに注意して下さい。また、contentで文字を挿入しないと、何も挿入されません。空文字でも構いません。

最初の文字:first-letter

最初の文字だけに適応します。

最初の行:first-line

最初の行だけに適応します。