技術コンテンツ

CSS

No.4 セレクター

【CSS】セレクター - スタイル（装飾）の適用要素

CSSのセレクターについて解説します。

検証環境

CSS

macOS

14.1

セレクター

セレクターは“スタイルの適用要素”です。

複数の記述形式があり、必要に応じて使い分けることができます。

基本的なセレクター

要素名

要素名を使用するセレクターです。

基本構文

要素名 {
    プロパティ名: プロパティ値;
}

要素名はh1やpなどの要素名です。

サンプル

h1要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
h1 {
___ih_hl_end
    color: red;
}
</style>

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

ID

要素のid属性値を使用するセレクターです。

基本構文

シャープ（#）に続いてid属性値を指定します。

#id属性値 {
    プロパティ名: プロパティ値;
}

サンプル

id属性値がtitleの要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
#title {
___ih_hl_end
    color: red;
}
</style>

<h1 id="title">CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

クラス

要素のclass属性値を使用するセレクターです。

基本構文

ドット（.）に続いてclass属性値を指定します。

.class属性値 {
    プロパティ名: プロパティ値;
}

サンプル

class属性値がtitleの要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
.title {
___ih_hl_end
    color: red;
}
</style>

<h1 class="title">CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

属性

要素の任意属性を使用するセレクターです。

基本構文

[属性名="属性値"] {
    プロパティ名: プロパティ値;
}

サンプル

lang属性値がjaの要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
[lang="ja"] {
___ih_hl_end
    color: red;
}
</style>

<h1 lang="ja">CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

擬似クラス

擬似クラスは“要素の状態”を表すキーワードです。

擬似クラスをセレクターに使用することができます。

基本構文

:擬似クラス {
    プロパティ名: プロパティ値;
}

サンプル

カーソルが被っている状態の要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
:hover {
___ih_hl_end
    color: red;
}
</style>

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

※ プレビューにカーソルを被せている（重ねている）間、テキストカラーが赤色に変わります。

擬似要素

擬似要素は“要素の特定部分”を表すキーワードです。

擬似要素をセレクターに使用することができます。

基本構文

::擬似要素 {
    プロパティ名: プロパティ値;
}

サンプル

要素の１文字目を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
::first-letter {
___ih_hl_end
    color: red;
}
</style>

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

全て

全ての要素を示すセレクターです。

基本構文

* {
    プロパティ名: プロパティ値;
}

サンプル

全ての要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
* {
___ih_hl_end
    color: red;
}
</style>

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー

複合的なセレクター

複合的なセレクターは“複数セレクターを組み合わせたセレクター”です。

スタイルを適用する要素をより限定的に正確に指定できます。

例えば、『p要素かつクラスがimportant』の要素を示すセレクターは次のようになります。

sample.html

<style>
___ih_hl_start
p.important {
___ih_hl_end
    color: red;
}
</style>

<h1 class="important">CSS</h1>
<p class="important">CSSの正式名称はCascading Style Sheetsです。</p>
<p>プログラミング言語に分類されます。</p>

プレビュー

このようにセレクターを繋げ、要素名を使用する場合、要素名が最初になるように記述します。

結合的なセレクター

結合的なセレクターは“要素関係を含めたセレクター”です。

結合は主に４種類あり、親子関係や兄弟関係の要素を指定できます。

子孫結合

子孫結合は“前のセレクターに対して後のセレクターが子または孫であることを表す結合”です。

基本構文

セレクターをスペースで区切って指定します。

前セレクター 後セレクター {
    プロパティ名: プロパティ値;
}

サンプル

section要素の子孫であるp要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
section p {
___ih_hl_end
    color: red;
}
</style>

<section>
    <p>CSSの正式名称はCascading Style Sheetsです。</p>
    <div>
        <p>プログラミング言語に分類されます。</p>
    </div>
</section>
<p>CSSでHTMLやXMLの要素のスタイルを設定できます。</p>

プレビュー

子結合

子結合は“前のセレクターに対して後のセレクターが子であることを表す結合”です。

基本構文

セレクターを大なり括弧（>）で区切って指定します。

前セレクター > 後セレクター {
    プロパティ名: プロパティ値;
}

サンプル

section要素の子であるp要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
section > p {
___ih_hl_end
    color: red;
}
</style>

<section>
    <p>CSSの正式名称はCascading Style Sheetsです。</p>
    <div>
        <p>プログラミング言語に分類されます。</p>
    </div>
</section>
<p>CSSでHTMLやXMLの要素のスタイルを設定できます。</p>

プレビュー

次兄弟結合

次兄弟結合は“前のセレクターに対して後のセレクターが兄弟かつ次の要素であることを表す結合”です。

基本構文

セレクターをプラス（+）で区切って指定します。

前セレクター + 後セレクター {
    プロパティ名: プロパティ値;
}

サンプル

section要素の次兄弟要素かつp要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
section + p {
___ih_hl_end
    color: red;
}
</style>

<section>
    <p>CSSの正式名称はCascading Style Sheetsです。</p>
    <p>プログラミング言語に分類されます。</p>
</section>
<p>CSSでHTMLやXMLの要素のスタイルを設定できます。</p>

プレビュー

後続兄弟結合

後続兄弟結合は“前のセレクターに対して後のセレクターが兄弟かつ以降の要素であることを表す結合”です。

基本構文

セレクターをチルダ（~）で区切って指定します。

前セレクター ~ 後セレクター {
    プロパティ名: プロパティ値;
}

サンプル

section要素の後続兄弟要素かつh2要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
section ~ h2 {
___ih_hl_end
    color: red;
}
</style>

<h1>CSS</h1>
<h2>概要</h2>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
<section>
    <h2>CSSファイル</h2>
    <p>CSSで記述したファイルです。</p>
</section>
<h2>内部スタイル</h2>
<p>HTMLのstyle要素にスタイルを定義します。</p>
<h2>外部スタイル</h2>
<p>CSSファイルをlink要素で読み込みます。</p>
<h2>インラインスタイル</h2>
<p>HTML要素のstyle属性にスタイルを定義します。</p>

プレビュー

結合の応用

セレクターは任意の数だけ結合できます。

例えば、次のサンプルは３つのセレクターを結合します。

sample.html

<style>
___ih_hl_start
section div p {
___ih_hl_end
    color: red;
}
</style>

<h1>CSS</h1>
<section>
    <p>CSSの正式名称はCascading Style Sheetsです。</p>
    <div>
        <p>プログラミング言語に分類されます。</p>
    </div>
</section>
<div>
    <p>内部スタイルはHTMLのstyle要素にスタイルを定義します。</p>
    <p>外部スタイルはCSSファイルをlink要素で読み込みます。</p>
    <p>インラインスタイルはHTML要素のstyle属性にスタイルを定義します。</p>
</div>

プレビュー

複数のセレクター

複数のセレクターを同時に指定できます。

基本構文

複数のセレクターを同時に指定するには、カンマ（,）で区切ります。

Aセレクター, Bセレクター {
    プロパティ名: プロパティ値;
}

サンプル

h1要素とp要素を示すセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
h1, p {
___ih_hl_end
    color: red;
}
</style>

<h1>CSS</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>

プレビュー