開発ブログ

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

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

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

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

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

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

// IDでセレクト
#site-header{
  width:100%
}

// クラス名でセレクト
.grid-container{
  margin:0 -1% 30px;
}

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

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

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

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

// すべてのセレクタに同じスタイルを指定
h1, h2, h3 {
  font-weight:bold
}

子孫セレクタ: スペース

// 子孫であるクラスだけを選択
.section-wrapper h1 {
  font-size:24px;
}

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

// 直接の子孫であるクラスだけを選択
.section-wrapper > h1 {
  font-size:24px;
}

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

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

// すぐ直後にくるPを選択
.section-wrapper p + p {
  margin-top:10px
}

疑似クラス:nth-child

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

// n番目の子供
.section-wrapper p:nth-child(2) {
  margin-top:10px
}

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

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

// n番目の子供
.section-wrapper p:last-child{
  margin-top:0
}

否定クラス:not

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

// .no-padding以外に適応
.section-wrapper p:not(.no-padding){
  padding:10px 0;
}

疑似要素:before, after

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

// 疑似要素を挿入
.section-wrapper p:before{
  content:'';
  display:block;
  width:10px;
  height:10px;
  float:left;
}

最初の文字:first-letter

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

最初の行:first-line

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

 

閉じる