【初心者向け】HTMLコーディング必須のCSSセレクタを解説

HTMLコーディングで使用するCSSセレクタについて、勉強しなおしたいと思っていませんか？

CSSセレクタを細かく指定できるようになれば、Webページのデザインの幅が広がりますよね。

今回は、CSSセレクタをもっと知りたいという方のために、

について、詳しく解説していきます。

この記事を読めば、HTMLのCSSセレクタの指定が簡単にできるようになりますよ。

ぜひ最後まで読んでくださいね。

HTMLのCSSセレクタとは

そもそも、CSSセレクタとは、何なのでしょうか？

CSSは、HTML文書の任意の範囲を指定し、スタイルを適用する文書です。

HTMLは、下記のように、タグで囲まれた要素を持ち、その中に属性を持つことができます。

<p>p要素内の文章</p>
<span class="example">span要素内の文章</span>

この要素や属性などを指定して、HTMLをデザインすることがCSSの役割になります。

p {
    color: red;
}

上記は、p要素に対するスタイルの指定で、pと書かれた部分がセレクタとなります。

「color」の部分をプロパティ、「red」の部分を値と呼びます。

この例では、p要素の文字の色を赤に指定しています。

よく使うCSSセレクタ

CSSセレクタがどこの部分を指すのか分かっていただけましたね。

続いて、コーディングする際に、頻繁に使われるCSSセレクタについて紹介していきます。

要素の指定

<h1>h1要素内の文章</h1>
<p class="example">span要素内の文章</p>

h1 {
    font-size: 15px;
}

HTMLの要素をセレクタ指定することで、すべてのその要素に適用されます。

この例では、すべてのh1要素のスタイルが変わります。

全要素に対して指定

* {
    font-size: 15px;
}

セレクタに「*」を指定することで、全要素に対して、そのスタイルを適用することができます。

#ID名の指定

<p>p要素の内容</p>
<p id="example">ID名exampleのp要素</p>

#example {
   font-size: 15px;
}

「#」の後にID名を指定すると、そのID名を持つ要素にスタイルを適用することができます。

上記の例では、2行目のp要素のスタイルが変わります。

.class名の指定

<p>p要素の内容</p>
<p class="example">クラス名exampleのp要素</p>
<span class="example">クラス名exampleのspan要素</span>

.example {
     font-size: 15px;
}

「.」の後にクラス名を指定すると、そのクラス名を持つ要素にスタイルを適用することができます。

p.example {
     font-size: 15px;
}

クラス名の前に要素を書くと、そのクラス名の要素にのみスタイルが適用されます。

子孫セレクタの指定

<p>p要素の内容</p>
<p><span>p要素内のspan要素</span></p>
<span>span要素の文章</span>

p span {
     font-size: 15px;
}

間に半角スペースを入れてセレクタを記述すると、子孫セレクタを指定することができます。

上記の例では、p要素内のspan要素にのみ、スタイルが適用されます。

「>」を使った子セレクタの指定

<div>
<span>div要素の子要素のspan要素</span>
<div>
<p><span>div要素の孫要素のspan要素</span></p>
</div>
</div>
<span>span要素の内容</span>

div > span {
    font-size: 15px;
}

セレクタの間に「>」を入れると、指定の親要素の子要素にスタイルを適用することができます。

上記の例では、div要素の子要素のspan要素にのみ、スタイルが適用されます。

「+」を使った隣接セレクタの指定

<div>div要素の内容</div>
<p>div要素に隣接したp要素</p>
<p>p要素に隣接したp要素</p>

div + p {
     font-size: 15px;
}

セレクタの間に「+」を入れると、指定の要素に隣接した要素にスタイルを適用することができます。

上記の例では、div要素に隣接したp要素にのみ、スタイルが適用されます。

「~」を使った同じ階層のセレクタの指定

<p>div要素より前のp要素</p>
<div><p>div要素の子要素のp要素</p></div>
<p>div要素より後のp要素</p>
<p>div要素より後のp要素</p>

div ~ p {
    font-size: 15px;
}

セレクタの間に「~」を入れると、指定の要素の後にある要素にスタイルを適用することができます。

上記の例では、div要素より後のすべてのp要素にスタイルが適用されます。

ただし、階層が同じものに限ります。

複数のセレクタの指定

<div>div要素の内容</div>
<p>p要素の内容</p>
<span>span要素の内容</span>

div , span {
    font-size: 15px;
}

セレクタの間に「,」を入れると、指定した複数の要素にスタイルを適用することができます。

上記の例では、div要素とspan要素にスタイルが適用されます。

まとめ：CSSセレクタはHTMLコーディングの必須知識

今回は、HTMLで大切なCSSセレクタについて、説明しました。

今回お伝えしたCSSセレクタの例は、HTMLコーディングをする上で基本的な知識となるので、必ず覚えておきましょう。

この記事が、HTMLをデザインする際に、少しでも参考になれば幸いです。