擬似クラス!CSSでnth-of-typeを使う方法【初心者向け】

初心者向けにCSSでnth-of-typeを使って特定の要素にだけスタイルをあてる方法について解説しています。実際にコードを書きながら例をもとに説明しているので、自分でも書きながら理解していきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回はCSSでnth-of-typeを使って特殊な「擬似クラス」を使う方法を紹介します。

先頭から何番目だけ色を変えるといった特定の要素にスタイルを適用することができるので、覚えておくと便利でしょう。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はnth-of-typeという擬似クラスを使ってみよう。擬似クラスは、セレクタのうしろに追記することで要素の中でさらに条件をつけることができるものだよ。

大石ゆかり

田島メンター!nth-of-typeはどういった条件を指定できるんですか〜?

田島悠介

指定した要素が親要素から見て、同じ種類の要素のみを数えたとき何番目になるかというのを見るんだ。まずは基本の書き方を見てみよう。

大石ゆかり

分かりました!

 

目次

 

nth-of-typeとは

nth-of-typeとは、該当するいくつかのものをピックアップしてスタイルを適用するというプロパティで、CSS3より追加されたCSSセレクタの一つです。

「nth-of-type」のプロパティはこれ以上文章で書いてもピンとこないかもしれないですので、以下で実際に書いたものを紹介しています。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

nth-of-typeの書き方

今回は、疑似クラスの詳細については省略しますが、「nth-of-type(2n)」の前に「:」(コロン)がついていることに注目してください。

li:nth-of-type(2n){
  /*適用する内容*/
 }

( )内部の「n」を使って何番目というのをしてします。今回は「2n」番目であることから2の倍数である偶数番目に適用されます。

また、「3n-1」や「odd」「even」という指定も出来ます。「odd」「even」はそれぞれ奇数、偶数という指定方法です。

 

田島悠介

()内で指定された部分にのみ、スタイルが適用されるんだ。

大石ゆかり

この場合は偶数が対象ということですね。

田島悠介

次は実際の例で見てみよう。今回はリスト項目の指定の部分のみ色を変えるというのをやってみるよ。

 

実際に書いてみよう

実際にHTMLとCSSを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS nth-of-type</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>

  </body>
</html>

CSS

li:nth-of-type(2n){
  color: #5bc0de;
}

li{
  margin: 10px;
  font-size: 120%;
}

 

リスト項目<li>の2番目にCSSスタイルが適用されていると思います。

スクリーンショット 2016-08-29 17.09.28

<li>のようなリストであれば、間隔をあけてスタイルを適用するという事がわかりやすいと思います。上記にも説明していますが、(2n)という表現だけでなく、(odd)(偶数)、(even)(奇数)などの表現も使うことができます。

工夫次第ではいろいろな場面に応用的に使用することのできるCSSプロパティだと思います。「nth-of-type」をマスターして、CSSの応用を覚えていきましょう。

 

田島悠介

ちなみに、nth-of-typeと近い働きをする擬似クラスとしてnth-childというものもあるんだ。

大石ゆかり

nth-of-typeとnth-childはどう違うんですか?

田島悠介

最初にも言った通り、nth-of-typeは同じ種類の子要素を対象とするんだ。なので例えば間に違う要素があった場合、それは順番に数えないということだね。nth-childは要素の種類に関係なく、親要素から見て何番目の子要素であるかということを判定するよ。

大石ゆかり

なるほど、順番の数え方が少し違うということですね。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。