CSSでHTMLタグを装飾する場合、id属性やclass属性を使用してHTMLタグを指定することが出来ます。しかし、CSSには少し変わった指定方法が用意されていて、これらを使用すればid属性やclass属性を設定する必要がありません。

今回の記事ではCSSの少し変わった指定方法をご紹介したいと思います。

この記事で使用するHTMLの構造は個別に指定のない限り以下となります。

<div class="box1">
    <p class="title">【CSS】便利のセレクタ指定方法10選</p>
    <p class="text1">【CSS】便利のセレクタ指定方法10選</p>
    <p class="text2">【CSS】便利のセレクタ指定方法10選</p>
    <p class="text3">【CSS】便利のセレクタ指定方法10選</p>
    <p class="text4">【CSS】便利のセレクタ指定方法10選</p>
    <p class="text5">【CSS】便利のセレクタ指定方法10選</p>
    <div class="box2">
      <p class="title">【CSS】便利のセレクタ指定方法10選</p>
      <p class="text6">【CSS】便利のセレクタ指定方法10選</p>
      <p class="text7">【CSS】便利のセレクタ指定方法10選</p>
      <p class="text8">【CSS】便利のセレクタ指定方法10選</p>
      <p class="text9">【CSS】便利のセレクタ指定方法10選</p>
      <p class="text10">【CSS】便利のセレクタ指定方法10選</p>
    </div>
</div>

便利なセレクタ指定方法10選

全ての要素

全ての要素を指定する場合は以下のように指定します。

.box1 * {
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

直下の子要素を指定

直下の子要素を指定する場合は以下のように指定します。

.box1 > p{
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

すぐ後ろの兄弟要素を指定

すぐ後ろの兄弟要素を指定する場合は以下のように指定します。

.title + .text1{
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

後ろにある兄弟要素を指定

後ろにある兄弟要素を指定する場合は以下のように指定します。

.title ~ p{
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最初の要素を指定

最初の要素を指定する場合は以下のように指定します。:first-chidと:first-of-typeは扱いが微妙に異なります。

:first-childの場合

.box1 p:first-child{
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

:first-of-typeの場合

.box1 p:first-of-type{
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後の要素を指定

最後の要素を指定する場合は以下のように指定します。:last-childと:last-of-typeも同じく扱いが微妙に異なります。

:last-childの場合

.box1 p:last-child{
    padding: 5px;
    background: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

:last-of-typeの場合

.box1 p:last-of-type{
    padding: 5px;
    background: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

倍数の要素を指定

倍数の要素を指定する場合は以下のように指定します。

.box1 p:nth-of-type(〇n){
    color: red;
}

具体的には以下のように指定します。

2倍の場合

.box1 p:nth-of-type(2n){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

3倍の場合

.box1 p:nth-of-type(3n){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

4倍の場合

.box1 p:nth-of-type(4n){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

奇数の要素を指定

奇数の要素を指定する場合は以下のように指定します。偶数を指定する方法もいくつか存在します。

:nth-child(odd)の場合

.box1 p:nth-child(odd){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

:nth-of-type(2n+1)の場合

.box1 p:nth-of-type(2n+1){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

偶数の要素を指定

偶数の要素を指定する場合は以下のように指定します。偶数を指定する方法もいくつか存在します。

:nth-child(even)の場合

.box1 p:nth-child(even){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

:nth-of-type(2n)の場合

.box1 p:nth-of-type(2n){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

特定の要素を除外する指定

特定の要素を除外する指定の場合は以下のように指定します。

.box1 p:not(.title){
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最初の1文字目を指定

空の要素を指定する場合は以下のように指定します。

.box1 p:first-letter{
    color: red;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

このようにCSSには様々な指定方法が用意されています。これらを状況に応じて使用することで作業効率は格段に上がると思うので是非覚えておきたい内容ですね。