CSSのセレクタとは？覚えておきたい25種類と書き方

記事内に商品プロモーションが含まれる場合があります

今回はCSSの便利なセレクタを一挙にまとめていきます。セレクタをマスターしておくと、効率的なCSSを書くことができ後々ラクになるはずです。

図と表示見本は公開当時のものです。下のコードは誤記などを修正しています。セレクタが一致することと、継承や他のCSSとの優先順位を経て最終的な見た目が決まることは区別してください。

CSSのセレクタとは？

ご存知の方はスキップ

CSSの基本文法はセレクタ・プロパティ・値の3つからなります。

この中のセレクタというのは「CSSによるデザイン指定をどこの部分に対して適用するか」を決めるものになります。

プロパティと値についてはこちらの記事でていねいに解説しています。

予備知識

セレクタを理解するためには「親要素」と「子要素」について理解しておく必要があります。HTML/CSSを勉強するときには嫌というほど目にするものですね。

この図のように、開始タグ・内容・終了タグで表す要素があります。imgなど終了タグを書かない要素もあります。たとえば<p>例文</p>は1つの要素なわけですね。

HTMLではタグの中に別のタグが入ります。つまり、要素の中に別の要素が入ります。

ある要素のすぐ内側の階層にある要素を「子要素」、その直接の外側を「親要素」と呼びます。さらに深い階層まで含めた内側の要素は「子孫要素」です。たとえばこの図ではpタグが子要素、divタグが親要素になります。

予備知識は以上です。それではセレクタの書き方を見ていきましょう。

2. 必ずマスターしたい超基本セレクタ

まずは必ずマスターしておきたいセレクタの書き方をまとめます。

タグ名

p {
  color: orange;
}

タグで指定する

p {color: orange}のようにタグ名をそのまま書きます。これで全てのp要素に対してスタイルを適用することができます。h2 {〜}とすれば、全てのh2見出し要素のスタイルを変えることができます。

#id名

#example {
  color: orange;
}

idで指定する

あるid名に対してCSSを指定したいときは、セレクタは「#ID名」になります。【参考】HTMLのidとclassとは？

.class名

.example {
  color: orange;
}

classで指定する

classの場合は「.class名」と前にドットをつけます。これはなんだかんだ１番よく使うセレクタではないでしょうか。

カンマ区切りで複数のセレクタを書く

h2, p, .example {
  color: orange;
}

classで指定する

複数のタグやクラスに対して同じCSSをまとめて適用させたいときは、カンマ区切りで並べます。タグ名やclass名、id名を一緒に並べてもOKです。

絞り込み指定（半角スペース区切り）

.example p {
  color: orange;
}

classで指定する

半角スペースで区切って並べることで「◯の中の◯に対してのみCSSを適用」というようなことができます。このように絞り込むような指定は「子孫セレクタ」と呼ばれます。

3. 知っておくと便利なセレクタ

次に覚えておくと便利なセレクタを紹介していきます。CSS初心者の方も覚えておくことをおすすめします。

「*」で全要素に対して適用

* {
  color: orange;
}

全ての要素に対して適用させたいスタイルがあるときには「*」を使います。

▼使用例

HTMLコード

<h2>例文です</h2>
<p><a href="https://example.com/">例文</a>です</p>

CSSコード

* {
  font-size: 12px;
  color: orange;
}
/*全要素のフォントを12pxで橙色に*/

ブラウザ表示

この画像は公開当時の見本です。元コードのfont-weight:12pxは誤りのため、掲載コードではfont-size:12pxに修正しています。修正後はh2・p・aを含む全要素の文字サイズが12pxになり、画像の文字サイズの差とは異なります。

◯◯の中の全要素

.example * {
  color: orange;
}

合わせ技です。他のタグ名やclass名での指定のあとに半角スペース区切りで*と書けば「◯の中の全要素に対して」という指定になります。

▼使用例↓「.exampleの中の全要素」の文字色を変えてみます。

HTMLコード

<p>こっちは適用されない</p>
<div class="example">
  <h2>これには適用</h2>
  <p>これには適用</p>
</div>

CSSコード

.example *{
  color: orange;
}

ブラウザ表示

「>」で子要素にのみ適用

.example > p {
  color: orange;
}

半角スペース区切りだと、子要素の中の要素（孫要素）にまでスタイルが適用されますが、「>」をつけることで1つ下の階層の子要素にのみCSSが適用されるようになります。

▼使用例

HTMLコード

<div class="example">
  <p>こっちだけ適用</p>
  <div>   
    <p>こっちは適用されない</p>
  </div>
</div>

CSSコード

.example > p {
  color: orange;
}

ブラウザ表示

この例では.exampleの直接の子であるpだけがセレクタに一致し、さらに下の階層のpにはこのルールが直接一致しません。ただし、colorなど継承するプロパティは、一致した要素の子孫へ受け継がれることがあります。ちなみに「>」を2つ以上使って「◯の下の◯の下の◯に対して」という指定もできます。

「+」で同じ階層のすぐ後の要素にのみ適用

.example + p {
  color: orange;
}

「+」は同じ親を持つ兄弟要素のうち、直後の要素が右側のセレクタに一致するときに選びます。間の空白やコメントは要素として数えません。

▼使用例

HTMLコード

<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用されない</p>

CSSコード

.example + p {
  /*.exampleのすぐ後のpタグに対して…*/
  color: orange;
}

ブラウザ表示

「~」で同じ階層の後ろに並ぶ要素に適用

.example ~ p {
  color: orange;
}

「~」は同じ親を持つ兄弟要素のうち、後方にある要素で右側のセレクタに一致するものを選びます。間に別の要素があっても構いません。

▼使用例

HTMLコード

<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用される</p>

CSSコード

.example ~ p{
  color: orange;
}
/*.exampleの後のpタグに対して…*/

ブラウザ表示

「~区切りだと後ろに続くもの」、「+区切りだとすぐ後ろだけ」というイメージですね。

◯番目の要素だけに適用するセレクタ

これらのセレクタもデザインにこだわりたいときにとても便利です。:first-child、:last-child、:nth-child()は、同じ親の全ての子要素を基準に判定します。タグ名で絞った後の順番ではなく、空白やコメントは数えません。

最初の要素だけ

.example li:first-child {
  color: orange;
}

箇条書きを作るときなんかによく使います。「はじめのliだけ上に線をつけない」などですね。

▼使用例

HTMLコード

<ul class="example">
  <li>一文目</li>
  <li>二文目</li>
  <li>三文目</li>
</ul>

CSSコード

.example li {
  border-top: solid 1px black;/*文字の上に線を引く*/
}
.example li:first-child{
  border-top: none;/*最初だけ上線なし*/
}

ブラウザ表示

↑それぞれのリスト項目に上線を引くためのCSSを書き、その後に「最初の項目だけ上線なし」というCSSを上書きしているのですね。

最後の要素だけ

.example li:last-child {
  color: orange;
}

親の最後の子要素に一致する:last-childを使います。この例はliだけが並ぶため最後のliを選びますが、別の要素が後にあればそのliは一致しません。

▼使用例

HTMLコード

<ul class="example">
  <li>一文目</li>
  <li>二文目</li>
  <li>三文目</li>
</ul>

CSSコード

.example li {
  border-bottom: solid 1px black;
}
.example li:last-child {
  border-bottom-width: 2px;
  /*最後の要素の線だけ太く*/
}

ブラウザ表示

メニューや目次、箇条書きのデザインを変えるときなどによく使うので覚えておきたいですね。

最初の文字だけ

p::first-letter {
  color: orange;
}

::first-letterは、ブロックコンテナーの最初の整形済み行の先頭文字などを対象にする疑似要素です。句読点などを含む場合もあり、任意の要素の単純な1文字目とは限りません。たとえば段落の先頭文字を大きくすると、雑誌のような表現ができます。

▼使用例

HTMLコード

<p>例文なのですよ。</p>

CSSコード

p::first-letter {
  font-size: 2.0em;
}

ブラウザ表示

表やリストの奇数行だけスタイルを変える

li:nth-child(odd) {
  color: orange;
}

同じ親を持つ全ての兄弟要素を先頭から1、2、3…と数え、その奇数番目に一致する要素を選びます。li:nth-child(odd)は「liだけを数えた奇数番目」ではありません。これは表（table）やリスト（ul/ol/li）を見やすくシマシマにしたいときなどに便利です。

▼使用例

HTMLコード

<ul>
  <li>1行目</li>
  <li>2行目</li>
  <li>3行目</li>
  <li>4行目</li>
</ul>

CSSコード

ul li:nth-child(odd) {
  /*奇数番目のliだけ背景色を変える*/
  background: whitesmoke;
}

ブラウザ表示

偶数番目だけ

li:nth-child(even) {
  color: orange;
}

カッコの中をevenとすれば、偶数番目の要素に対する指定になります。

▼使用例

HTMLコード

<ul>
  <li>1行目</li>
  <li>2行目</li>
  <li>3行目</li>
  <li>4行目</li>
</ul>

CSSコード

ul li:nth-child(even) {
  /*偶数番目のliだけ背景色を変える*/
  background: whitesmoke;
}

ブラウザ表示

n番目だけ

li:nth-child(3n) {
  color: orange;
}

↑3の倍数番目の要素だけ

nを使ってCSSを適用させる要素を自由に指定することもできます。たとえば(3n)とすれば3の倍数番目だけ、(2n+1)とすれば1、3、5、7番目…に一致します。nは0から始まる整数として考え、実際の位置は1番目から数えます。

▼使用例

HTMLコード

<ul>
  <li>1行目</li>
  <li>2行目</li>
  <li>3行目</li>
  <li>4行目</li>
</ul>

CSSコード

ul li:nth-child(3n) {
  /*3の倍数番目だけ*/
  background: whitesmoke;
}

ブラウザ表示

5. リンクでよく使うセレクタ

↑こちらの記事で解説していますが、ここでも簡単にまとめておきます。

セレクタと解説

a:hover {〜}：カーソルを上にのせたときのスタイル
a:visited {〜}：訪問済みリンクのスタイル
a:link {〜}：未訪問のリンクのスタイル
a:active {〜}：リンクを押している間など、アクティブ化しているときのスタイル

:linkと:visitedはhrefを持つリンクが対象です。:visitedはプライバシー保護のため変更できるプロパティが色などに制限され、JavaScriptから訪問履歴を判別することもできません。競合する同じ詳細度の指定は一般に:link、:visited、:hover、:activeの順で書きます。タッチ操作では:hoverが使えない場合もあるので、キーボード操作には:focus-visibleなどでフォーカスも示してください。

:hoverはaタグ以外にもよく使いますね。例えば、img:hoverで画像の上にカーソルをのせたときに少しデザインを変えたりする、などですね。

6. 否定セレクタ（〜以外）

否定セレクタ:not()を使うと「◯◯に対して適用、ただし△△は除く」というような指定ができます。

◯以外に適用する:not()

p:not(.example) {
  color: orange;
}

◻に適用しないものを書く

これは否定擬似クラスと呼ばれる便利なものです。たとえばp:not(.example)と書けば「pタグに対して指定するが、class名がexampleのpタグだけは除く」というような指定になります。

▼使用例

HTMLコード

<p>これは例文です</p>
<p class="example">これは例文です</p>
<p>これは例文です</p>
<p>これは例文です</p>

CSSコード

p:not(.example) {
  /*.example以外をオレンジに*/
  color:orange;
}

ブラウザ表示

↑exampleクラスを持たないp要素の文字色がオレンジになりました。複数クラスのうち1つでもexampleを持てば、このセレクタから除かれます。

:last-childなどと組み合わせる

:not()を:last-childや:first-childと組み合わせることもできます。たとえば、li:not(:last-child)と書けば、liタグ（ただし親の最後の子要素であるliは除く）のスタイルを変えることができるのです。

▼使用例

HTMLコード

<ul>
  <li>最初の例文です</li>
  <li>例文です</li>
  <li>例文です</li>
  <li>最後の例文です</li>
</ul>

CSSコード

ul li:not(:last-child) {
  /*最後のliだけは適用しない*/
  color:orange;
}

ブラウザ表示

:not()で複数指定する

li:not(:last-child):not(:first-child) {
  color: orange;
}

◻と△に適用しないものを書く

「◯と△以外」というように、複数の要素を適用されないようにしたいこともあるかと思います。そんなときは:not()を並べて書けばOKです。3つ以上並べてもOKです。現在の:not()にはカンマ区切りのセレクタリストも書けますが、ここでは元の連結した書き方で紹介します。

▼使用例

HTMLコード

<ul>
  <li>最初の例文です</li>
  <li>例文です</li>
  <li>例文です</li>
  <li>最後の例文です</li>
</ul>

CSSコード

ul li:not(:last-child):not(:first-child) {
  /*最初と最後のliは除く*/
  color:orange;
}

ブラウザ表示

7. 属性セレクタ

意外と知られていないような気がしますが「属性セレクタ」と呼ばれるものも時々使います。これを使えば「◯◯という属性が入っている要素だけデザインを変える」ということができます。属性についてはHTMLの書き方で解説しています。

ある属性名を含む要素だけにCSSを適用

a[target] {
  color: orange;
}

たとえばa[target]と書けば、リンク要素のうちtarget属性を含むものにだけスタイルを適用させることができます。

▼使用例

HTMLコード

<a href="https://example.com/">これは例です</a>
<br>
<a href="https://example.com/" target="_blank" rel="noopener">これは例です</a>

CSSコード

a[target] {
  color:orange;
}

ブラウザ表示

属性名と値で指定

a[target="_blank"] {
  color: orange;
}

たとえばa[target="_blank"]と書けば、target属性を含み、さらにその値が_blankのリンクにのみスタイルを適用することができます。

▼使用例

HTMLコード

<a href="https://example.com/">これは例です</a><br>
<a href="https://example.com/" target="_blank" rel="noopener">これは例です</a><br>
<a href="https://example.com/" target="exampleWindow">これは例です</a>

CSSコード

a[target="_blank"] {
  color:orange;
}

ブラウザ表示

【参考】属性セレクタ｜MDN

ここまで25種類のセレクタを紹介してきました。他にもまだまだたくさんのセレクタがあるのでCSSは奥が深いものですね。

この記事が参考になるかも