【超初心者】CSSセレクタをマスターする

タグ、id、classのCSSセレクタを詳しく紹介します。

CSSでHTMLを装飾するには、以下の手順があります。

HTMLを書く
CSSセレクタ、プロパティ、値で特定のHTML要素を装飾する

ここでポイントとなるのは、HTMLの書き方によって、CSSセレクタの指定方法が異なることです。

CSSセレクタ、プロパティ、値、に関する基本的なことは下のの記事で紹介しています。

参考記事：CSSの反映のさせかた

Contents

HTMLの構造とCSSセレクタ
まとめ

HTMLの構造とCSSセレクタ

CSSセレクタとは

CSSセレクタとは、HTMLのどの要素を装飾するか、CSSの側で選ぶものであり、HTMLのタグやidやclassを指定することができます。
また、HTMLの構造を利用して指定することもでき、その指定方法は複数存在します。

本記事では、CSSセレクタとして何をどのように選べばよいのか、具体的にみていきたいと思います。

HTMLの構造

HTMLとは、タグによって、ウェブサイトの構成を決めます。どの文章がどんな役割を持つのか、どんな機能を持つのかのベースとなる部分をHTMLのタグによって指定します。
例えば、以下のコードを見てみてください。

See the Pen rNerJmx by M2RnRT (@m2rnrt) on CodePen.

h1タグはどこの要素にも属していませんが、h3タグはcontainerというクラス属性値を持つ、ブロック要素を作るdiv要素の中のさらにarticleタグの中に含まれています。
この時、class=container属性を持つdivタグが親要素、記事が書かれていることを示すarticle要素が子要素、見出しh3タグが孫要素となります。
HTMLはこのように、階層的な構造をしばしば作ります。

この時、CSSの指定の方法は、いくつかのパターンが考えられます。上のコードのCSSボタンを押してみてください。Resultの表示の様にするためにいくつかCSSが設定されています。なんとなく分かると思いますが、CSSセレクタに複数のパターンがあることが確認できます。以下の記事で、もっと詳しく見てみましょう。

HTMLの構造について理解することが、CSSセレクタを理解するためのカギなんだ！

HTMLの属性：classとid

CSSセレクタにはいくつかのパターンがありますが、それを理解するために避けては通れない概念が、HTMLの属性の一つである、classとidです。属性は以下の例の様にHTMLのタグの中に書きます。

<div class="container">
        <article class="main-article">
            <h3 id="sub-title">善悪の基準</h3>
            <h3>善悪の基準２</h3>
            <p class="example" id="sample">悪い子にはお仕置きをしなくてはなりません。
                しかし、悪いかどうか、つまり善悪の基準はどこにあるのでしょう？
                それは至って主観的なモノであり、時には独善的になることもありうるのです。
            </p>
        </article>
    </div>

サンプルコードの様に、classやidはどのタグの中にも書くことができます。また、同時に指定することもできます。基本的にどんな文字を指定してもよいのですが、できるだけ人が見て意味の分かるように指定するのが一般的です。
さて、ここでCSSセレクタの決め方に関してはいくつか考えられます。それに関して詳しく見ていきましょう。

CSSセレクタの種類

CSSセレクタの決め方は主に４つあります。

タグで指定する
classで指定する
idで指定する
階層構造を使って指定する

なぜそんなに指定方法があるのか、それはそれぞれに長所と短所があるからです。

タグで指定する

See the Pen QWNBmOG by M2RnRT (@m2rnrt) on CodePen.

先ほどのサンプルコードを用いて説明します。
例えば、CSSセレクタとしてh3を選ぶことができます。color: red;と指定して、赤色にしてみましょう。すると、classやidとは関係なく、すべてのh3タグが赤色に変化します。

タグで指定すると、そのタグによって作られたHTML要素のすべてにCSSを適応することができます。

classで指定する

See the Pen yLOqKEz by M2RnRT (@m2rnrt) on CodePen.

CSSセレクタとしてclassを指定する場合は、「ドット+クラスの属性値」とします。
例では、class=”sub-title”を指定するので、CSSセレクタとしては「.sub-title」となります。
classで指定すると、そのクラスを属性として持っているタグのみに適応されるので、ピンポイントでCSSを適応させることができます。

idで指定する

See the Pen xxVJWyQ by M2RnRT (@m2rnrt) on CodePen.

idで指定する場合、「＃+属性値」とします。サンプルでは、id=”sample”を選んでいるので、CSSセレクタとしては「#sample」とします。
ここで注意していただきたいのが、この例だと、classでは赤色を、idでは青色を同じpタグに対して指定しています。しかし、結果を見てわかる通りに、idに指定した方が優先されています。
同じタグに対して、classとidを同時に設定できますが、idのほうが優先されます。