2022/04/29 (更新日:2024/07/11)

CSSのセレクターに関する基本的な知識を解説。

Categories > CSSのセレクター編

CSSのセレクターに関する知識がどこかに、まとまってないかな？？

この記事はこの様な方へ向けて書いています。

HTMLとCSSの基礎的な知識が備わっている方向けなので、もし自信がない方はまず、下記の記事をお読み下さい。HTML,CSSについてまとめてあります。

HTMLの書き方とよく使うタグの使い方【基礎文法】

CSSの基本的な書き方とは？【初心者でもOK】

この記事で得られる知識。

セレクターに関する基礎知識
セレクターの種類と指定方法
疑似クラス
詳細度

参考webサイト

CSSセレクター/MDN

さらに詳しく知りたい方は上の参考記事をお読み下さい。

では内容へ。

セレクターに関する基礎知識

まずは基礎の中でも、基礎的な知識から！

ではまず「CSSのセレクター」に関する基礎知識から記述します。CSSセレクターとはCSSで書いたスタイルを「どこに適用するか？」を指定するものです。

CSSセレクターに関する基礎知識

上の画像で「p」の部分が「セレクター」に該当します。pの文字色を青に指定しています。

基本的な知識ですのでCSSを書くには必須です。

では様々なセレクターの種類について記述していきます。知らないものがあった場合は、使ってみると面白いと思います。何気ないところで活かせたりしますので。

セレクターの種類

全称セレクター
要素型セレクター
クラスセレクター
ID セレクター
属性セレクター
疑似クラス

ではそれぞれについて詳しく解説します。

全称セレクター

全称セレクターを使えば、全ての要素にスタイルを適用できます。

* {
    padding: 0;
}

この様に、「*」(アスタリスク)を書くことで、全てのHTML要素にスタイルが当たります。

上の例では、全ての要素のpaddingを0に設定しています。これはよく使う方法で、ユーザーエージェントスタイルシート(user agent stylesheet)の効果を無くすために用いられます。

ユーザーエージェントスタイルシートは、ブラウザがデフォルトで持ってるCSSのことで、何も指定してないのにh1要素などが太字で大きく表示されるのはこの影響です。

paddingが予め設定されている要素が多いので、それを一括で無効化します。よく使われるタイミングとしては最初に書くことです。そうすることで後からpaddingをつけた時に邪魔しません。

要素型セレクター

要素型セレクターは要素に当てるセレクターです。比較的に広くスタイルが当たるため、多様しないのが無難です。広く共通するような指定をしましょう。

その反面、上手く使うと指定回数が減るので便利です。そこはセンスというか、慣れですかね。

h1 {
    font-size: 30px;
}

上の例では、全てのh1の文字サイズが30pxになるという指定です。

クラスセレクター

classセレクター

この様に「.」ドットの後にクラス属性を書くことで、そのclass名をもった全ての要素を指定することができます。よく使いますね。

<div class="circle"></div>

この様にHTMLの要素にクラス属性を与えることができます。半角空白で区切ることで、何個でもクラス名を付与できます。

.circle {
    border-radius: 50%;
    background-color: green;
    width: 100px;
    height: 100px;
}

class属性にcircleという名前をもった全ての要素にclassセレクターで上の様なスタイルを指定してみました。border-radiusは要素の形を丸めることができます。今回は50%を指定したので要素が丸くなるはずです。

背景に色がないとdiv要素の形が分からないのでbackground-colorをgreenにして、要素の幅をwidthで指定して、要素の高さをheightで指定しました。すると下の画像の様になります。

緑の円

class属性は後からでも、htmlのタグにつけることが可能で、変更点があっても、CSSを変更するだけで、指定していた全ての要素のスタイルが変更できるため、非常に便利です。

ID セレクター

idセレクター

htmlのid属性の値に基づいて指定することが可能です。「#」パウンド記号の後にidに値を書きます。

<ul id="nav">
    <li>りんご</li>
    <li>ぶどう</li>
    <li>いちご</li>
</ul>

この様にhtmlのタグにid属性を与えて、それに対して下記の様な指定をしてみます。

#nav {
    border: 1px solid #000;
}

これはhtmlのタグのid属性の値がnavの属性にスタイルを指定しています。borderというプロパティーに、線の太さは1pxで、線の種類はsolidで、色は#000という指定をしています。

すると下の画像の様になります。

idセレクター

id属性の値がnavであるul要素に、境界線が指定通りに付いていることが確認できます。

また、重要なのは、同じid属性はHTMLファイルの中で一つしか与えられないということです。値が違うid属性はつけれますが、今の例でいうと「nav」という値をもった要素は一つだけとなります。

なので必然的に#navが示す要素は一つに決まります。一度に複数の要素にスタイルを当てられないので、class属性を使ってスタイルを当てていくことの方が多いです。

既にid属性を与えていた要素に対して、スタイルを当てる時などに使いますね。

属性セレクター

属性セレクターはHTMLのタグの属性を書くことで指定できます。

上の例では、href属性がついていて、値がhtts://google.comの要素を指定しています。aタグとかですかね。

上の例は値も設定しましたが、属性の名前だけでもOKです。

[target] {
    color: brown;
}

この様に指定するとtarget属性がついてるHTML要素を指定していることになります。target=”_blank”とaタグに付けると、リンクをクリックした際に別タブが開いて遷移します。外部のサイトへのリンクなどによく設定されていたりしますね。

逆に、内部リンクはtarget属性は付けず、同じタブで遷移させたりします。

<a href="https://google.com" target="_blank">googleへ</a>

この様にtarget属性が付いているHTMLタグが反応して、テキストの色が指定通りbrownになるはずです。

属性セレクターtarget

上の様にしっかりスタイルが当たっていることが確認できます。ご自身でもPCにHTMLファイルを作って試してみるといいかもしれません！

また、属性セレクターは他にも指定方法があります。まず箇条書きしますね。

属性セレクターの指定方法

属性名での指定
完全一致
前方一致
後方一致
部分一致

ではそれぞれ詳しく解説しますね。

属性名での指定

属性名での指定は上述した通りです。なのでここではよく使われる使われ方について解説します。

a[target] {
    color: brown;
}

この様に、「くっつけて」要素自体を書くことで、target属性がついているaタグを指定していることになります。

a [target] {
    color: brown;
}

似た書き方ですが、aと[target]の間に半角スペースがあると別の意味になります。aタグの中の[target]属性がついた要素を指定という意味になるので注意が必要ですね。

完全一致

a[href="https://google.com"] {
    color: brown;
}

この様に書くとhref属性の値がhttps://google.comであるaタグという指定になります。属性名だけでなく、その値も一致している要素だけにスタイルが当たるので、より細かい指定が可能ということですね。

前方一致

a[href^="https"] {
    color: brown;
}

この様に書くと前方一致を意味します。この例では、href属性の値がhttpsではじまるaタグという指定ですね。

実際にhttpとhttpsという2種類のリンクがあるので、それを区別したい時などに使うことができます。

後方一致

a[href$="com"] {
    color: brown;
}

この様に書くと後方一致を意味します。この例では、href属性の値がcomでおわるaタグという指定ですね。

「こーゆーのもあるのか」と知っておくといつかどこかで使えるかもしれません。

部分一致

a[href*="google"] {
    color: brown;
}

この様に書くと部分一致を意味します。この例では、href属性の値にgoogleが含まれているaタグという指定ですね。

これは結構使い道がありそうです。例えば、リンクが沢山あるサイトなどで、キャンペーン中の目立てたいリンクだけ、文字色を変える、などができそうです。

疑似クラス

CSSでは疑似クラスという面白い指定方法があります。疑似クラスといっても、様々な種類があります。まずは、どの様なグループがあるか箇条書きで挙げていきます。

疑似クラス

ユーザー操作擬似クラス
入力擬似クラス
ツリー構造擬似クラス

これら３つをこの記事でご紹介します。他にも何個かグループがあるのですが、よく使うものに絞ってご説明します。需要があれば、別に記事で他のもの解説しますので、ぜひTwitterにDM下さい。

もしくは下記の参考記事をご覧下さい。

疑似クラス/MDN

どんな疑似クラスがあるかざっくりと列挙。

ここでグループごとにどんな疑似クラスがあるのか、ざっくりと列挙します。名前は覚えなくても、「こーゆーのあったな」と知っておく程度でOKです、どこかで言われていた時に、「あのことね」と通じればOKです。

テストに出るわけではありませんし、そもそもテストとかないです。コード書ければ大丈夫です。

ユーザー操作擬似クラス

:hover
:active
:focus

入力擬似クラス

checked

ツリー構造擬似クラス

:nth-child
:nth-of-type
:first-of-type
:last-of-type
:empty

ではそれぞれについて解説します。

:hover

(ここに何かセレクターを):hoverと書くことで、マウスがその要素に乗っている時はスタイルが当たるという指定が可能です。

.circle {
    border-radius: 50%;
    background-color: green;
    width: 100px;
    height: 100px;
}

.circle:hover {
    background-color: blue;
}

先の程の様な緑の要素を作って、その要素に対して、:hoverという疑似クラスで指定しています。この例では、マウスが乗った時に、要素の色が緑になります。

この様に動きがあると面白いですよね！

あと、疑似クラスは「:」コロン一つです。似たものにコロン二つの疑似要素というのがあるので注意です。

:active

(ここに何かセレクターを):activeと書くことで、ボタンが押されたる間だけスタイルが当たるという指定が可能です。

クリックとはマウスで、マウスで「押す」と「離す」の２つで1クリックですが、その「押す」の間だけスタイルが当たる感じです。

実際にコードと動画でお見せします。

.circle:active {
    background-color: blue;
}

この様に、さっき作った緑の円の要素にactive疑似クラスを設定しました。押している間は、色が青くなるはずです。

:focus

(ここに何かセレクターを):focusと書くことで、inputタグなどに入力中だけスタイルが当たるという指定が可能です。

inputタグをHTMLで設置すると、ユーザーからの入力を受け取ることができます。お問い合わせフォームなどで使われていますね。そこへの入力中は「フォーカス」という状態になります。

そのフォーカスという状態の時だけスタイルが当たるという指定方法ですね。

<input type="text">

この様にHTMLファイルにinputタグをおいて入力欄を作りました。

input:focus {
    background-color: rgb(177, 163, 163);
}

そして、CSSで:focusという疑似クラスを設定しました。この例ではフォーカス時に背景色が灰色になる設定ですね。どうなるかは下記の通りです。

checked

(ここに何かセレクターを):checkedと書くことで、チェックボックスにおいてチェックが入ってる状態の時だけにスタイルを当てるという指定が可能です。

<input type="checkbox">

このようにHTMLファイルにチェックボックスを設置しました。

input:checked {
    width: 70px;
    height: 70px;
}

そしてcheckedという疑似クラスを設定しました。この例では、チェックされている時は、幅を70px、高さを70pxにして、少し大きく表示してあげる設定ですね。では、どうなるかは下記の通りです。

:nth-child

:nth-child()と書くことで、同じ階層内の()内の数字に対応する順番の要素にスタイルを当てるという指定が可能です。

<div>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
</div>

例えば、この様なコードをHTMLファイルに書きました。

div > :nth-child(3) {
    background-color: #000;
}

そしてこの様に、div > :nth-child(3)としてあげて、div要素の直下の階層の3番目の要素という指定をしてみました。この例では、背景色を黒く指定しています。

:nth-child

この様に、3番目の要素の背景色が黒くなっています。

:nth-child()の面白い使い方！

:nth-child()はかっこの中にnを含む数式を入れることで、複数の要素を指定することができます。よく使うのは、:nth-child(2n+1)などですね。これは奇数を表してします。

nには0,1,2,3と順番に数字がずっと入っていきます。なので2n+1はその階層の奇数番目の要素を表していることになります。

div > :nth-child(2n+1) {
    background-color: #000;
}

この様に、CSSを書くと下記の通りになります。

nh-child-2n+1

また奇数番目と偶数番目は下記のように表現可能です。

:nth-child(odd)　奇数番目
:nth-child(even)　偶数番目

他にも3n+1などいろいろな指定が可能なので試してみて下さい。

:nth-of-type

(ここに何かセレクターを):nth-of-type()と書くことで、同じ階層内の()内の数字に対応する順番の「特定の」要素にスタイルを当てるという指定が可能です。

:nth-child()は「同じ階層内の何番目の要素か」を区別していただけでしたが、「同じ階層内の何番目の(何の)要素か」というように、種類も区別することができます。

:の前に何かセレクターを書くので注意が必要です。

<div>
    <h1>h1の見出し</h1>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <h2>h2の見出し</h2>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <h2>h2の見出し</h2>
    <p>おはようございます！</p>
    <h2>h2の見出し</h2>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
</div>

まずこの様なコードをHTMLファイルにを書きました。

div > h2:nth-of-type(2) {
    background-color: #000;
}

そしてこの様なCSSを書くと、div要素の中の2番目のh2要素にスタイルを当てることできます。どうなるかは下記の通りです。

nth-of-type

しっかりと、2番目のh2要素にスタイルが当たっていることが確認できます。

また、nth-child()と同じように、evenとoddでも指定可能です。

:first-of-type

(ここに何かセレクターを):first-of-typeと書くことで、同じ階層内の「最初の」特定の要素にスタイルを当てるという指定が可能です。

div > h2:first-of-type {
    background-color: #000;
}

この様に、指定すると、下の画像の通りになります。

:first-of-type

:last-of-type

(ここに何かセレクターを):last-of-typeと書くことで、同じ階層内の「最後の」特定の要素にスタイルを当てるという指定が可能です。

div > h2:last-of-type {
    background-color: #000;
}

この様に、指定すると、下の画像の通りになります。

last-of-type

:empty

:emptyは要素の中身が空である要素を指定してスタイルを当てることができます。

<ul>
    <li>a</li>
    <li>a</li>
    <li></li>
    <li>a</li>
    <li>a</li>
    <li></li>
</ul>

この様に、二つの要素だけ中身を空にしました。

li:empty {
    background-color: blueviolet;
}

この様に:emptyで空のli要素の背景色を変更しました。

:empty

emptyでは、「半角スペース」や「改行」が入っている場合は空とみなさないので注意が必要です。

また、コメントアウトしたものだけが入っていた場合は空とみなされます。

<li><!-- コメントアウトした文字 --></li>

この様な要素ですね。

HTMLでは

<!-- -->

に挟まれたものはコメントとして、無効化されます。

vscoodなどのプログラミング用のテキストエディターでは、ctrl + /　でショートカットが使えます。これで簡単にカーソルがある行をコメントアウトしたり、有効活用したりできます。

:not()という疑似クラスもある。

:not()を使うことで「()の中に書いたセレクター以外の要素」を指定することができます。書き方の例を挙げますね。

<div>
    <h1>h1の見出し</h1>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <h2>h2の見出し</h2>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
    <h2>h2の見出し</h2>
    <p>おはようございます！</p>
    <h2>h2の見出し</h2>
    <p>おはようございます！</p>
    <p>おはようございます！</p>
</div>

このようなコードをHTMLファイルに書きました。

:not(p) {
    color: red;
}

そしてこの様なCSSを書くと、()の中に書いてるセレクター以外の要素なので、p以外の要素にスタイルが当たります。この例では、文字色が赤くなるはずです。

:not

p以外の要素にスタイルが当たっていることが確認できるかと思います。

詳細度

同じ要素に複数の背反的なスタイルが当たっている時は「詳細度」の計算により、優先されるスタイルが決まります。

詳細度の計算

idの数
class,属性,疑似クラスの数
要素,疑似要素の数

これらの順番で計算します。

まず、「idの数」で計算し、それが同数なら、2の「class,属性,疑似クラスの数」で計算し、それも同数なら「要素,疑似要素の数」で計算します。

このように、どれだけ詳細に指定しているか？で計算します。

これらが等しい場合は、最後に読み込まれたものが適用されます。上に書いたものが、下に書いたもので上書きされる感じです。

!important

例外的に、!importantを使うと最優先されます。

p {
    color: blueviolet!important;
}

このように書くと最も優先されます。２つの!importantからスタイルが当たっている場合は、詳細度が高い方が優先されます。

ですが、!importantは多様するのは良いコードではありません。修正が難しくなるからです。!importantを!importantで上書きするのを繰り返すと、!importantでしか上書きできなくなります。

なので、本当に必要な時だけ使いましょう。

まとめ

この記事ではCSSのセレクターに関する知識をまとめました。ざっと読めばCSSセレクターに関する基礎知識およびよく使う知識は取得できるかと思います。

皆さんもCSSを使って自分好みのwebサイトやwebサービスを作ってみて下さい！

参考webサイト

こちらのサイトにCSSセレクターに関する情報が詳しく載っているので、より詳しく勉強したい方はぜひこちらをお読み下さい。

CSSセレクター/MDN

このblogではプログラミングに関する知識などを幅広く提供します。それと僕のTwitterでも日々勉強したことなどを呟いてるので、興味があったら、お役立て下さい。

ではまた。