【CSS初心者必見】よく使うcssセレクタ11選！

CSSセレクタとは

CSSセレクタとは、CSSをどのHTML要素に適用させるかを指定するかを選択する時に使います。

CSSセレクタの種類

子孫要素

階層の深い子要素も対象になる。

div p{
  color: #000;
}

直下の子要素

１つ下の階層の子要素だけが対象となり、孫要素は対象外。

div > p{
  color: #000;
}

兄弟要素

指定した要素より後にでてくる同じ階層の要素が対象。

h2~p{
  color: #000;
}

最初の子要素

その要素の中で最初にでてくる子要素。

p:first-of-type{
  color: #000;
}

最後の子要素

その要素の中で最後にでてくる子要素。

p:last-of-type{
  color: #000;
}

〇〇番目の子要素

()の中には1〜の好きな数字を半角で入力する。

入力された数字番目の要素が対象。

p:nth-of-type(3){
  color: #000;
}

後ろから〇〇番目の子要素

()の中には1〜の好きな数字を半角で入力する。

後ろから数えて、入力した数字番目の要素が対象。

p:nth-last-of-type(2){
  color: #000;
}

文章の一行目

文章の一行目に対してCSSを適用する。

p::first-line{
  color: #000;
}

一文字目

文章の一文字目に対してCSSを適用する。

p::first-letter{
  color: #000;
}

要素が空の時

要素の中身が空の要素に対してCSSを適用できる。

ul:empty{
  display:none
}

全ての要素

HTMLに書かれた全ての要素をセレクタにする

*{
  color: #000;
}