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

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

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

CSSのセレクタとは？

ご存知の方はスキップ

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

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

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

初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！

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

要素は開始タグ〜終了タグまでのかたまりを指します。たとえば<p>例文</p>は1つの要素なわけですね。

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

ある要素の中に入る要素は「子要素」と呼ばれます。その子要素をはさんでいるもの＝「親要素」ですね。たとえばこの図ではpタグが子要素、divタグが親要素になります。

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

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

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

タグ名 {〜}

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

#id名 {〜}

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

.class名 {〜}

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

◯,◯,◯ {〜}

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

◯ ◯ ◯ {〜}

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

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

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

* {〜}

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

▼使用例

◯ * {〜}

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

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

◯ > ◯ {〜}

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

▼使用例

このように.exampleの子要素のpタグにのみスタイルが適用されます。さらに下の階層のpタグには適用されません。ちなみに「>」を2つ以上使って「◯の下の◯の下の◯に対して」という指定もできます。

◯ + ◯ {〜}

「+」で区切ると、同じ階層のすぐ隣（後ろ）の要素にのみCSSが適用されます。

▼使用例

◯ ~ ◯ {〜}

「~」で区切ると同階層の後につづく要素に適用されます。

▼使用例

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

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

これらのセレクタもデザインにこだわりたいときにとても便利です。

◯:first-child {〜}

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

▼使用例

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

◯:last-child {〜}

並んでいる要素のうち最後のものだけスタイルを変えることができます。

▼使用例

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

◯:first-letter {〜}

要素内の1文字目だけスタイルを変えることができます。たとえば段落の一文字目だけフォントサイズを大きくすれば雑誌でよく見るような表現ができますね。

▼使用例

◯:nth-child(odd) {〜}

奇数番目の要素だけ見た目を変えることができます。これは表（table）やリスト（ul/ol/li）を見やすくシマシマにしたいときなどに便利です。

▼使用例

◯:nth-child(even) {〜}

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

▼使用例

◯:nth-child(3n) {〜}↑3の倍数番目の要素だけ

nを使ってCSSを適用させる要素を自由に指定することもできます。たとえば(3n)とすれば3の倍数番目だけ、(2n+1)とすれば3、5、7番目…にのみ適用されるわけですね。

▼使用例

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

HTMLのリンク＜aタグ＞の書き方を初心者向けに解説

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

• a:hover {〜}：カーソルを上にのせたときのスタイル
• a:visited {〜}：訪問済みリンクのスタイル
• a:link {〜}：未訪問のリンクのスタイル
• a:active {〜}：クリックした瞬間（ボタンを押し込んだとき）のスタイル

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

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

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

◯:not(◻) {〜}◻に適用しないものを書く

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

▼使用例

↑クラス名がexample以外のp要素の文字色オレンジになりました。

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

▼使用例

◯:not(◻):not(△){〜}◻と△に適用しないものを書く

「◯と△以外」というように、複数の要素を適用されないようにしたいこともあるかと思います。そんなときは:not()を並べて書けばOKです。3つ以上並べてもOKです。

▼使用例

7. 属性セレクタ

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

◯[属性名]{〜}

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

▼使用例

◯[属性名=”値”]{〜}

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

▼使用例

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

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

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

divとspanの違いは？使い分け方を初心者向けに解説

HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）

コピペで使えるCSSデザインサンプル集（Web用コード250個以上まとめ）