【CSS】セレクター - スタイル（装飾）の対象
CSSでスタイルの適用要素を指定するセレクターについてご紹介します。
セレクター
セレクターはスタイルの適用要素を指定する文字列です。
様々な方法でセレクターを定義することができます。
基本的なセレクター
要素の種類
要素の種類を指定できます。
要素の種類 {
プロパティ名: プロパティ値;
}次の例はh1要素にスタイルを適用します。
<style>
h1 {
color: red;
}
</style>
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>ID
要素のid属性値を指定できます。
シャープ（#）に続いてid属性値を記述します。
#id属性値 {
プロパティ名: プロパティ値;
}次の例はid属性値がtitleの要素にスタイルを適用します。
<style>
#title {
color: red;
}
</style>
<h1 id="title">CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>クラス
要素のclass属性値を指定できます。
ドット（.）に続いてクラス属性値を記述します。
.class属性値 {
プロパティ名: プロパティ値;
}次の例はクラス属性値がtitleの要素にスタイルを適用します。
<style>
.title {
color: red;
}
</style>
<h1 class="title">CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>属性
要素の特定属性を指摘できます。
[属性名="値"] {
プロパティ名: プロパティ値;
}次の例はlang属性値がjaの要素にスタイルを適用します。
<style>
[lang="ja"] {
color: red;
}
</style>
<h1 lang="ja">CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>擬似クラス
要素の擬似クラス（状態）を指定できます。
擬似クラスについては次の記事をご覧ください。
:擬似クラス {
プロパティ名: プロパティ値;
}次の例はhover（カーソルが被っている状態）の要素にスタイルを適用します。
<style>
:hover {
color: red;
}
</style>
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>擬似要素
要素の擬似要素（部分）を指定できます。
擬似要素については次の記事をご覧ください。
:擬似要素 {
プロパティ名: プロパティ値;
}次の例はbefore（最初の子要素）の部分にスタイルを適用します。
<style>
::before {
content: "> ";
}
</style>
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>全て
全ての要素を指定できます。
* {
プロパティ名: プロパティ値;
}次の例は全ての要素のテキストカラーを赤色にします。
<style>
* {
color: red;
}
</style>
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>複合的なセレクター
セレクターは組み合わせて指定できます。
組み合わせる順序は要素名を使用する場合、要素名が最初になるようにします。
次の例は『p要素かつクラスがimportant』の要素にスタイルを意味します。
<style>
p.important {
color: red;
}
</style>
<h1 class="important">CSSとは</h1>
<p class="important">CSSの正式名称はCascading Style Sheetsです。</p>
<p>プログラミング言語に分類されます。</p>結合的なセレクター
複数セレクターを結合して、要素の関係を含めたセレクターにできます。
結合には主に４種類あります。
子孫結合
子孫結合は前のセレクターに対して後のセレクターが子または孫であることを表わします。
定義方法は対象のセレクター間をスペースで区切って指定します。
前セレクター 後セレクター {
プロパティ名: プロパティ値;
}次の例はsection要素の子孫であるp要素にスタイルを適用します。
<style>
section p {
color: red;
}
</style>
<section>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
<div>
<p>プログラミング言語に分類されます。</p>
</div>
</section>
<p>CSSでHTMLやXMLの要素のスタイル（装飾）を設定することができます。</p>子結合
子結合は前のセレクターに対して後のセレクターが子であることを表わします。
定義方法は対象のセレクター間を大なり括弧（>）で区切って指定します。
前セレクター > 後セレクター {
プロパティ名: プロパティ値;
}次の例はsection要素の子であるp要素にスタイルを適用します。
<style>
section > p {
color: red;
}
</style>
<section>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
<div>
<p>プログラミング言語に分類されます。</p>
</div>
</section>
<p>CSSでHTMLやXMLの要素のスタイル（装飾）を設定することができます。</p>次兄弟結合
次兄弟結合は前のセレクターに対して後のセレクターが兄弟かつ次の要素であることを表わします。
定義方法は対象のセレクター間をプラス（+）で区切って指定します。
結合方法はセレクターをプラス（+）で区切って定義します。
前セレクター + 後セレクター {
プロパティ名: プロパティ値;
}次の例はsection要素の次兄弟要素かつp要素にスタイルを適用します。
<style>
section + p {
color: red;
}
</style>
<section>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
<p>プログラミング言語に分類されます。</p>
</section>
<p>CSSでHTMLやXMLの要素のスタイル（装飾）を設定することができます。</p>後続兄弟結合
後続兄弟結合は前のセレクターに対して後のセレクターが兄弟かつ以降の要素であることを表わします。
定義方法は対象のセレクター間をチルダ（~）で区切って指定します。
前セレクター ~ 後セレクター {
プロパティ名: プロパティ値;
}次の例はsection要素の後続兄弟要素かつh2要素にスタイルを適用します。
<style>
section ~ h2 {
color: red;
}
</style>
<h1>CSSとは</h1>
<section>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
<p>プログラミング言語に分類されます。</p>
</section>
<h2>内部スタイルシート</h2>
<p>HTMLのstyle要素にスタイルを定義します。</p>
<h2>外部スタイルシート</h2>
<p>HTMLファイルとは別にCSSファイルを作り、link要素でスタイルシートを読み込みます。</p>
<h2>インラインスタイルシート</h2>
<p>HTML要素のstyle属性にスタイルを定義します。</p>結合の応用
３つ以上のセレクターを結合できます。
次の例はsection要素の子孫であるdiv要素の子孫であるp要素にスタイルを適用します。
<style>
section div p {
color: red;
}
</style>
<h1>CSSとは</h1>
<section>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
<div>
<p>プログラミング言語に分類されます。</p>
</div>
</section>
<div>
<p>内部スタイルシートはHTMLのstyle要素にスタイルを定義します。</p>
<p>外部スタイルシートはHTMLファイルとは別にCSSファイルを作り、link要素でスタイルシートを読み込みます。</p>
<p>インラインスタイルシートはHTML要素のstyle属性にスタイルを定義します。</p>
</div>複数のセレクター
複数のセレクターを同時に指定するには、カンマ（,）で区切って定義します。
Aセレクター, Bセレクター {
プロパティ名: プロパティ値;
}次の例はh1要素とp要素にスタイルを適用します。
<style>
h1, p {
color: red;
}
</style>
<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>
