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

CSSのセレクタまとめ

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

セレクタとは?

ご存知の方はスキップ

CSSの書き方の基本

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

セレクタとは?

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

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

予備知識

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

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

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

親要素と子要素

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

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

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

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

タグ名

タグ名 {〜}

タグで指定する

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

#id名

#id名 {〜}

idで指定する

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

.class名

.class名 {〜}

classで指定する

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

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

◯,◯,◯ {〜}

classで指定する

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

絞り込み指定(半角スペース区切り)

◯ ◯ ◯ {〜}

classで指定する

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

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

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

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

* {〜}

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

▼使用例

HTML
<h2>例文です</h2>
<p><a href="〜">例文</a>です</p>
CSS
* {font-weight: 12px;
   color: orange;}
/*全要素のフォントを12pxで橙色に*/

例文です

◯◯の中の全要素

◯ * {〜}

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

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

HTML
<p>こっちは適用されない</p>
<div class="example">
	<h2>これには適用</h2>
	<p>これには適用</p>
</div>
CSS
.example * {
	color: orange;
}

ブラウザ表示例

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

◯ > ◯ {〜}

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

▼使用例

HTML
<div class="example">
    <p>こっちだけ適用</p>
    <div>   
        <p>こっちは適用されない</p>
    </div>
</div>
CSS
.example > p {
	color: orange;
}

ブラウザ表示例

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

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

◯ + ◯ {〜}

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

▼使用例

HTML
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用されない</p>
CSS
.example + p {
/*.exampleのすぐ後のpタグに対して…*/
	color: orange;
}

ブラウザ表示例

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

◯ ~ ◯ {〜}

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

▼使用例

HTML
<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用される</p>
CSS
.example ~ p {
	color: orange;
}
/*.exampleの後のpタグに対して…*/

ブラウザ表示例

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

◯番目の要素だけに適用する系

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

最初の要素だけ

◯:first-child {〜}

箇条書きを作るときなんかによく使います。「はじめの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;/*最初だけ線なし*/
}

firstchildの例

最後の要素だけ

◯:last-child {〜}

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

▼使用例

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;
    /*最後の要素の線だけ太く*/
}

lastchildの例

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

最初の文字だけ

◯:first-letter {〜}

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

▼使用例

HTML
<p>例文なのですよ。</p>
CSS
p:first-letter {
    font-size: 2.0em;
}

first-letterの使い方例

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

◯:nth-child(odd) {〜}

奇数番目の要素だけ見た目を変えることができます。これは表(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){
    background: whitesmoke;
/*奇数番目のliだけ背景色を変える*/}

奇数行の背景色だけ塗りつぶし

偶数番目だけ

◯:nth-child(even) {〜}

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

▼使用例

HTML
<ul>
    <li>1行目</li>
    <li>2行目</li>
    <li>3行目</li>
    <li>4行目</li>
</ul>
CSS
ul li:nth-child(even){
    background: whitesmoke;
/*偶数番目のliだけ背景色を変える*/}

偶数番目の行だけスタイルを変える

n番目だけ

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

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

▼使用例

HTML
<ul>
    <li>1行目</li>
    <li>2行目</li>
    <li>3行目</li>
    <li>4行目</li>
</ul>
CSS
ul li:nth-child(3n){
    background: whitesmoke;
/*3の倍数番目だけ*/}

n番目の要素にだけcssを適用

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

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

セレクタと解説

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

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

6. 否定セレクタ(〜以外)

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

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

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

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

▼使用例

HTML
<p>これは例文です</p>
<p class="example">これは例文です</p>
<p>これは例文です</p>
<p>これは例文です</p>
CSS
p:not(.example) {
    color:orange;
/*.example以外をオレンジに*/}

擬似否定セレクタの使い方

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

: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){
    color:orange;
/*最後のliだけは適用しない*/}

否定疑似クラスの使い方例

:not()で複数指定する

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

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

▼使用例

HTML
<ul>
    <li>最初の例文です</li>
    <li>例文です</li>
    <li>例文です</li>
    <li>最後の例文です</li>
</ul>
CSS
ul li:not(:last-child):not(:first-child){
    color:orange;
/*最初と最後のliは除く*/}

複数の:not()を使用した例

7. 属性セレクタ

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

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

◯[属性名]{〜}

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

▼使用例

HTML
<a href="◯">これは例です</a>
<br>
<a href="◯" target="_blank">これは例です</a>
CSS
a[target] {
	color:orange;
}

属性名で適用先を指定

属性名と値で指定

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

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

▼使用例

HTML
<a href="◯">これは例です</a><br>
<a href="◯" target="_blank">これは例です</a><br>
<a href="◯" target="_new">これは例です</a>
CSS
a[target="_blank"] {
	color:orange;
}

属性+値でセレクタ指定する例

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

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

サルワカ