【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

CSSの擬似クラスを使いこなそう〜nth-childとnth-of-typeの違いとは

CSSの擬似クラスを使いこなそう〜nth-childとnth-of-typeの違いとは

こんにちは。開発部の濵口です。

もうそろそろ梅雨入りですね。いかがお過ごしでしょうか。

みなさんCSSの擬似クラスはご存知でしょうか?擬似クラスを使いこなすと柔軟にセレクタを指定することができるため、Webページの装飾の幅が広がります。

今回は数ある擬似クラスの中でも似通っていて混乱しがちな、nth-childとnth-of-typeの違いについて解説していきます!

擬似クラスの利用

nth-childもnth-of-typeもn番目の要素を指定することのできる擬似クラスです。

例えば、表の背景色は交互に色分けされていることが多いですよね。そんな時にnth-childやnth-of-typeを利用すると簡単に実現できます。

これら擬似クラスはどちらも同じような用途で使いますが、基本的に別の機能をもった擬似クラスです。理解して使用しないと「思ったものとは違う要素にスタイルが適用されてしまう」ことがありますので、違いを明確にしていきましょう!

nth-childとnth-of-typeの違いを理解する

nth-childとは

nth-childは以下のような形式で記載することで、「指定要素の兄弟要素のうちで、上からn番目の指定要素」に対してスタイルを適用します。

『 要素:nth-child(値){スタイルの内容} 』

以下のHTMLでどの要素がターゲットとなるのかを実際に確認していきましょう。このHTMLにはFruitsという親要素の中に7つの子要素が含まれています。


<div class="Fruits">
   <h1>旬の果物</h1>
   <p>りんご</p>
   <p>みかん</p>
   <p>バナナ</p>
   <p>ブドウ</p>
   <p>桃</p>
   <p>レモン</p>
</div>

以下のCSSを適用します。


.Fruits p:nth-child(3) {
       color: #FF0000;
}

「みかん」にスタイルが適用されて赤文字に変わっていることがわかります。直感的には指定要素がpタグなのでpタグの3番目である「バナナ」にスタイルが適用されそうですが実際は違います。

nth-childでは兄弟要素を上から数える際、指定要素以外の兄弟要素(h1タグ)も対象とするため、単純に上から3番目である「みかん」が選ばれるわけですね。

nth-of-typeとは

nth-of-typeの記載形式もnth-childと変わりませんが、こちらは「指定要素の兄弟要素のうちで、指定要素の順位が上からn番目の要素」に対してスタイルを適用します。

『 要素:nth-of-type(値){スタイルの内容} 』

先ほどのHTMLに以下のCSSを適用します。


.Fruits p:nth-of-type(3) {
       color: #FF0000;
}

今度は「バナナ」が赤文字に変わりました。nth-of-typeは指定要素であるpタグの順位を数えるため、pタグのうちで3番目である「バナナ」が選ばれたわけですね。

終わりに

いかがでしたでしょう。nth-childとnth-of-typeの違いがわかりましたでしょうか。

直感的には「nth-childは他の要素が関係するが、nth-of-typeは他の要素が関係しない」と解釈できるかと思います。両者の機能の違いを理解して、使用する擬似クラスを選定するようにしましょう。

またどちらの擬似クラスも(値)部分には数字だけでなく、2n+1のような式や、奇数偶数を表すキーワードのoddやevenが使用できます。例えば、3の倍数の要素を指定したければ3nと指定することで可能です。

サンプルを用意しましたので実際にCSSを変更して表示を確認してみるのも良いでしょう。
参考 Url : http://hamaguchi-test.aispr.jp/web/SampleNth

ぜひ擬似クラスを使いこなしてWebデザインに磨きをかけましょう!

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+