CSSでは、スタイルを適用するHTMLの要素を指定するために セレクタ を使用します。

この セレクタの指定にはいくつかの方法があり、それによってスタイルが反映される優先度が異なります。

セレクタを理解することで、Webコーディングに対し多くのメリットを享受できます。

Selector of CSS(セレクタ)

どの HTMLタグ に CSS を適用するかを選択するためのものを セレクタ といいます。

例えば、 divタグをセレクタに指定した場合は、以下のような書き方になります。


div { 
    width: 100%;
    height: 70px;
    background-color: deepskyblue;
    padding: 8px;
}
            

このように記述することで、htmlファイルに記述されている すべてのdivタグ に波括弧({})の中のスタイルが適用されます。

実際の開発では、全てのタグにではなく 一部のタグ に適用したい場合がほとんどのため、より詳しくHTMLタグを選択する方法 が必要になります。

セレクタの種類

セレクタの種類 は とても多くあり、書き方によってスタイルを適用する要素を細かに選択することができます。

例えば「この要素内にある一番最後の子要素」のように細かく選択することもできます。

次の表は、一般的な種類の セレクタ についてです。

セレクタの種類 選択対象について
要素セレクタ 指定されたすべての HTML 要素 div {...}
(すべての <div> を選択)
ID セレクタ 指定された値と、ページ上の HTML の id属性 に設定された 値 が一致している要素( 同名の id をページ上で複数の要素に設定することはできません ) #demoId {...}
<div id="demoId">デモ</div>
Class セレクタ 指定された値と、ページ上の HTML の class属性 に設定された 値 が一致しているすべての要素( 同名の class をページ上で複数の要素に設定することができます ) .demo-class {...}
<div class="demo-class">デモ</div>
属性 セレクタ 指定された値と、ページ上の HTML で 同じ属性 を持つ全ての要素 [hidden] {...}
<div hidden>デモ</div>
擬似クラス セレクタ 指定された値と、ページ上の HTML が 同じ状態 である要素 a:hover {...}
( 要素の上にマウスのポインタがある(ホバー)状態である aタグ を選択 )

classセレクタ と idセレクタ

HTMLの id属性 や class 属性を セレクタに指定できます。

この方法が最もよく使用されるため、ここで詳しく説明します。

classセレクタ

class属性 は複数の要素に 同一の値 を設定することができ、また空白区切りで 複数の値 を設定することができます

classセレクタの構文[CSS]

<div>
    <p class="greeting text-highlight">おはよう</p>
    <p class="greeting text-highlight">こんにちは</p>
    <p class="greeting text-highlight">こんばんは</p>
</div>
                

この例では、それぞれの pタグ の class属性に「greeting」と「text-highlight」という class を設定しています。

次は、それぞれの class を セレクタ にして CSS を設定します。

class をセレクタで指定する場合は、先頭にドット(.)を付ける必要があります


.greeting {
    color: #ffa726;
}

.text-highlight {
    font-size: 24px;
    font-weight: 800;
}
                

これらを実行することで、選択したセレクタに該当する class を持つ要素すべてにスタイルが適用されることが分かると思います。

実行結果

おはよう

こんにちは

こんばんは

複数クラスを持つ要素のセレクタ

次のように、区切り無しで複数のクラスを指定することで、指定したすべてのクラスが含まれている要素を指定することができます。


/* 複数のクラスを持つ要素を対象とするセレクタの書き方 */
.greeting.text-highlight {
    font-size: 42px;
}
        

idセレクタ

HTMLのid属性 にはページ内で重複しない 一意の値 を設定することができ、class属性と異なり 設定できる値は 一つのみ となります。

idセレクタは class セレクタよりもスタイルが反映される 優先度は高くなります

idセレクタの構文[CSS]

<div>
    <p id="morning" class="greeting text-highlight">おはよう</p>
    <p class="greeting text-highlight">こんにちは</p>
    <p class="greeting text-highlight">こんばんは</p>
</div>
                

一番目の pタグ に 「morning」という id を設定しています。

この id を セレクタ にして CSS を設定します。

id をセレクタで使用する場合は、先頭にシャープ(#)を付ける 必要があります


#morning {
    color: #e91e63;
}
                

これを実行することで、id属性 に morning を設定した要素だけ、文字色が変更することが分かると思います。

実行結果

おはよう

こんにちは

こんばんは

また、この結果のように class属性 よりも id属性 で 選択したスタイルが優先されることも覚えておきましょう。

属性セレクタ

属性セレクタは、HTMLタグの 属性有無 によってスタイルを当てる要素を選択します。

この属性セレクタは classセレクタと 優先度は同等 となります。

属性セレクタの構文[CSS]

<div>
    <p data-lang="ja" id="morning" class="greeting text-highlight">おはよう</p>
    <p data-lang="ja" class="greeting text-highlight">こんにちは</p>
    <p data-lang="ja" class="greeting text-highlight">こんばんは</p>
</div>
                

それぞれの pタグに data-lang="ja" と、 data-lang属性 ja を指定しています。

属性をセレクタで使用する場合は 属性を角括弧[])で囲みます

属性の有無で選択

これは、data-lang属性 が 存在する要素 を選択する書き方になります。


[data-lang] {
    color: #2196f3;
}
                

属性の値で選択

これは、data-lang属性 の 値 が ja の要素を選択する書き方です。


[data-lang="ja"] {
    color: #2196f3;
}
                

実行結果

おはよう

こんにちは

こんばんは

属性セレクタの書き方は他にもいくつか存在します。

詳しくは 属性セレクター – CSS: カスケーディングスタイルシート | MDN を御覧ください。

擬似クラス

擬似クラスは、セレクタに追加 して使用します。

セレクタで指定された要素が 特別な状態 になった場合を選択するために使用されます。

この擬似クラスには 要素の上にマウスを乗せた時の :hover や、最初の要素や最後の要素を指定する :first-child:last-child などがあります。

擬似クラス一覧は、擬似クラス – CSS: カスケーディングスタイルシート | MDN で確認できます。

擬似クラスは 先頭にコロン:を付ける必要があります

例えば、a要素にマウスのカーソルを合わせた場合の :hover を付ける場合は、以下のようになります。


a:hover {
    font-size: 22px;
    color: #ffc107;
    font-weight: bold;
}
                

<a href="./index.html">トップページ</a>
                

実行結果

上記のリンクの上にマウスを乗せると、a:hover で指定したスタイルが反映されることが確認できます。

子孫セレクタと子セレクタ

セレクタの記述の仕方によって、特定の 要素の子孫 にスタイルを適用することができます。

主な書き方は二通りあります。

子孫セレクタ

セレクタ を 複数組み合わせて 対象となる 要素を選択します。

「子孫」すべて を対象とする場合は、セレクタ を 空白区切り で指定します


<div id="greetingBox">
    <div class="japanese">
        <p>おはよう</p>
        <p>こんにちは</p>
        <p>こんばんは</p>
    </div>
    <div class="english">
        <p>Good Morning</p>
        <p>Hello</p>
        <p>Good Evening</p>
    </div>
</div>
                

idgreetingBox の 子孫要素のうち pタグ を セレクタにする方法は以下のようになります。


#greetingBox p {
    font-size: 24px;
    font-weight: 800;
}
                

左側に 親要素 を選択して 空白 を空け 選択対象となる子要素を 選択しています。 

この様に記述することで、 greetingBox子孫すべてpタグに スタイルが適用されます。

実行結果

おはよう

こんにちは

こんばんは

Good Morning

Hello

Good Evening

子セレクタ

上記の方法では、子孫全てにスタイルが適用されましたが、「子」要素のみを対象とする書き方もあります。

子孫全てを対象とする書き方とは セレクタの 区切り方 が異なります。

子の要素のみを 対象とする場合は 記号 > で区切ります。

子要素セレクタ[CSS]

.japanese > p {
    color: #4caf50;
}
                

class属性に japanese が指定されている 要素の「子要素」の pタグ にスタイルが適用されます。

実行結果

おはよう

こんにちは

こんばんは

Good Morning

Hello

Good Evening

例えば「#greetingBox > p」としても、#greetingBox の直の子ではないため、スタイルは反映されません。

記号 > で連結した場合は、孫ではなく 「子」の要素のみを選択する といった書き方になります。

記号 > を使用して #greetingBox から pタグ を選択する場合は以下のようになります。


#greetingBox > .japanese > p {
    color: #4caf50;
}
                

その他の、セレクタについての詳細は、CSS セレクター – ウェブ開発を学ぶ | MDN をご覧ください。

セレクタの詳細度

Detail point(詳細度)

前回の記事で説明した「CSSの記述方法で優先度の違い」があったように、セレクタの指定の仕方によって 適用されるスタイルの優先度は異なります

セレクタの場合、この優先度は セレクタの詳細度 と比例します。

より詳細に要素を指定できる id の方が class より優先度が高くなります。

セレクタ 説明 点数
インラインスタイル style属性に直接記述するため一番点数が高い。 1000
IDセレクタ #idのようにid属性を使用して特定の要素を指定するため点数は高い。 100
クラスセレクタ・属性セレクタ・擬似クラス .class-name[attr=value]a:hoverなどは多数の要素を指定するため低め。 10
要素セレクタ・疑似要素 h1:firstなどは不特定多数の要素を指すため低い。 1
ユニバーサルセレクタ・コンビネータ・否定擬似クラス *+>~:notは影響を与えない。 0

この様に 直接セレクタの対象となる要素は、親要素や祖先から継承したスタイルよりも常に優先されます

また、単純に pタグ を 指定する場合も「 p (点数: 1点)」とセレクタで指定するより「 div p (点数: 2点)」と指定するほうが詳細度は高くなります。

どのスタイルが優先されているかについては、ブラウザの デベロッパーツール で確認することができます。

明確な 詳細度 については カスケードと継承 – ウェブ開発を学ぶ | MDN[詳細度] をご覧ください。

課題

今回の課題は、以下の HTML を htmlファイル の bodyタグ 内に作成して行ってください。


<section>
    <div>
        <p>日本語</p>
        <p>Japanese</p>
    </div>
    <div>
        <p>かばん</p>
        <p>Bag</p>
    </div>
    <div>
        <p>バス</p>
        <p>Bus</p>
    </div>
</section>
                

sectionタグ内のすべての文字サイズを 32px に変更する CSS を書いて、ブラウザで文字サイズが変更されている確認してください。

class属性を使い、日本語には 文字色 #4caf50 (緑)を、英語には 文字色 #673ab7 (紫)を設定し、ブラウザでそれぞれの文字色が反映されていることを確認してください。

ひらがな で記述されている「かばん」に id を設定し、文字色を #e91e63 (ピンク) にするCSSを書き、ブラウザで反映されていることを確認してください。

3つ目の div で囲まれている 「バス」「Bus」の文字を中央寄せにしてください。(中央寄せは、text-align: center;

CSSの設定の仕方は自由です。

設定後にブラウザで、反映されていることを確認してください。