CSSセレクタについて

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

目次

• セレクタとは
• 基本セレクタ
• 知っておくと便利なセレクタ
• ◯番目の要素だけに適用するセレクタ
• 否定セレクタ（〜以外)
• 属性セレクタ

セレクタとは

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

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

基本セレクタ

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

タグ名

タグ名 {〜}

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

#id名

#id名 {〜}

あるid名に対してCSSを指定したいときは、セレクタは「#ID名」になります。

.class名

.class名 {〜}

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

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

◯,◯,◯ {〜}

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

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

◯ ◯ ◯ {〜}

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

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

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

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

* {〜}

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

▼使用例

<h2>例文です</h2>
<p><a href="〜">例文</a>です</p>

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

◯◯の中の全要素

◯ * {〜}

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

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

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

.example * {
  color: orange;
}

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

◯ > ◯ {〜}

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

▼使用例

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

.example > p {
  color: orange;
}

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

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

◯ + ◯ {〜}

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

▼使用例

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

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

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

◯ ~ ◯ {〜}

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

▼使用例

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

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

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

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

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

最初の要素だけ

◯:first-child {〜}

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

▼使用例

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

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

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

最後の要素だけ

◯:last-child {〜}

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

▼使用例

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

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

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

最初の文字だけ

◯:first-letter {〜}

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

▼使用例

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

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

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

◯:nth-child(odd) {〜}

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

▼使用例

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

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

偶数番目だけ

◯:nth-child(even) {〜}

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

▼使用例

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

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

n番目だけ

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

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

▼使用例

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

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

否定セレクタ（〜以外）

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

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

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

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

▼使用例

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

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

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

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

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

▼使用例

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

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

:not()で複数指定する

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

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

▼使用例

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

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

属性セレクタ

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

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

◯[属性名]{〜}

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

▼使用例

<a href="◯">これは例です</a>
<br>
<a href="◯" target="_blank">これは例です</a>

a[target] {
  color:orange;
}

属性名と値で指定

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

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

▼使用例

<a href="◯">これは例です</a><br>
<a href="◯" target="_blank">これは例です</a><br>
<a href="◯" target="_new">これは例です</a>

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

チェックテスト