バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[CSS]:nth-last-child擬似クラスと:nth-last-of-type擬似クラス

ここ数日は涼しいを通り越して少し肌寒いような……

季節の変わり目、皆様体調にお気をつけください。スタッフ「ほ」です。

イラストレーターのツール紹介は「の」ががんばってくれていますので、私はもうちょっとWebネタで引っ張ります。

最近、ずっとfirstやらlastやらの擬似クラスをご紹介していますが、このfirst/lastシリーズは今回でとりあえずおしまいです。

今日ネタにするのは「nth-last-child」と「nth-last-of-type」という2つの擬似クラスです。

例をあげていきましょう。

【HTML】


<div id="footer">
 (省略)
  <p><a href="#header">▲ページトップへ</a></p>
  <p>Copyright 2014 Vanfu Training School, All Rights Reserved.</p>
</div>

各ページに設置したフッター部分です。
ページごとに内容の変更が若干あるものの、必ず最後のパーツは「Copyright」で、最後から2番目のパーツは「▲ページトップへ」という形は確定している……そんな時に使います。

「Copyright」部分だけに装飾をかける場合は、以前ご紹介しているlast-childでできますね。

今回使うnth-last-childは、「▲ページトップへ」の部分に装飾を与えることができます。

【css】


#footer p:nth-last-child(2) {
	text-align:right;
}

結果、「▲ページトップへ」の部分だけを右揃えにすることができます。

つまり、nth-last-childは、「最後から○番目の要素」に対して適用する指定です。

nth-last-childは、nth-childと同じように、間にp要素以外のパーツが入り込んでしまうと、そのパーツもカウント対象にしてしまいます。

その場合は、nth-last-of-typeを使うことで、同じ要素だけをカウント対象として適用することができます。

【HTML】


<div id="footer">
 (省略)
 <p><a href="#header">▲ページトップへ</a></p>
 <ul>
     <li><a href="#">プライバシーポリシー</a></li>
     <li><a href="#">サイトマップ</a>
     </li><li><a href="#">お問い合わせ</a></li>
 </ul>
 <p>Copyright 2014 Vanfu Training School, All Rights Reserved.</p>
</div> 

【css】


#footer p:nth-last-of-type(2) {
	text-align:right;
}

うーーん、もうちょっと「こういう時に使える!」というバシッとした例が思いつくといいのですが、どれもイマイチ説得力に欠けます。すみません。

「こういうところで使いましたよ!」というのがあったら、ぜひ教えてください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

The following two tabs change content below.
アバター画像

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ