3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】
初心者向けに3の倍数などn番目の要素だけCSSをスタイルする方法について解説しています。特定の倍数の要素にのみスタイルを適用する際には擬似クラスを使用します。:nth-of-typeを使った実際の指定の例についてサンプルコードで見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手間が省ける上に、可読性の高いコードとなります。ぜひ参考にしてみてください。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
3の倍数などn番目の要素だけCSSをスタイルする方法について詳しく説明していくね！
お願いします！
疑似クラスの説明と使い方
通常、CSSのセレクタでは、HTMLタグやクラス名、id名で指定して、デザインを作っていきますが、擬似クラスでは、指定された要素の状態や、条件を追加することができます。
例えば、マウスがのっている時だけに適用させたい場合は、タグ名:hoverとします。
CSS：
a:hover{ color:red; }
このように、条件や状態を追加することができる擬似クラスはたくさんあります。
- :active／アクティブ状態
- :visited／訪問済みのリンク
- :focus／<input>などの要素が入力状態
- :checked／checkboxなどでチェックされている状態
- :first-child／最初の子要素
- :nth-child／親要素の中で、全ての子要素の内、x番目の子要素
- :nth-of-type／親要素の中で、x番目の子要素
などなど、まだいっぱいあります。
3の倍数の要素にスタイルを適用する方法
3の倍数の要素にスタイルを適用するには、x番目の要素を選択できる :nth-of-type を使用します。HTMLで、余分なクラス名をつけることなく、CSSだけで適用できます。
HTML：
<html> <head> <meta charset="utf-8"> <title>nth-of-typeを使ってみよう</title> </head> <body> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> <span>14</span> <span>15</span> <span>16</span> <span>17</span> <span>18</span> <span>19</span> <span>20</span> </body>
CSS：
@charset "UTF-8"; /*文字コードの指定*/
body{
display:flex;
flex-wrap:wrap;
margin:30px;
font-size:20px;
font-weight:bolder;
}
span{
display:block;
width:100px;
height:100px;
margin:5px;
background:gold;
}
このうち、3の倍数のボックスのみをグリーンに変えるには、下記のように書きます。
span:nth-of-type(3n){ background: limegreen; }
span:nth-of-type(3n)は、3×n番目の<span>という意味です。nは自然数なので、3×n番目 = 3の倍数番目ということになります。
n番目の要素にスタイルを適用する方法
nth-of-type()の()の中には、3nだけでなく、好きな数字を入れてx番目の要素を選択することができます。10番目のボックスの色を赤にするには、
span:nth-of-type(10){ background:tomato; }
と書きます。
疑似クラスを使ってみよう
このように、nth-of-typeを使えば、好きな番号のボックスの色をCSSだけで変更することができます。
また、
- 偶数番目のボックスの文字色を白にする場合：span:nth-of-type(2n){ color:white; }
- 奇数番目のボックスの文字色を赤にする場合：span:nth-of-type(2n+1){ color:tomato; }
のように書きます。
このようにnth-of-typeを使えば、好きな子要素を選択することが可能です。
HTML：
<html> <head> <meta charset="utf-8"> <title>nth-of-typeを使ってみよう</title> </head> <body> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> <span>14</span> <span>15</span> <span>16</span> <span>17</span> <span>18</span> <span>19</span> <span>20</span> </body> </html>
CSS：
body{
display:flex;
flex-wrap:wrap;
margin:30px;
font-size:20px;
font-weight:bolder;
}
span{
display:block;
width:100px;
height:100px;
margin:5px;
background:gold;
box-sizing:border-box;
}
span:nth-of-type(3n){
background:limegreen;
}
span:nth-of-type(10){
background:tomato;
}
span:nth-of-type(2n){
color:white;
}
span:nth-of-type(2n+1){
color:tomato;
}
span:nth-of-type(3n+1){
border:limegreen 5px solid;
}
span:nth-of-type(2n+3){
background:white;
}
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
