Home » ★CSS3リファレンス

★CSS3リファレンス

E:nth-last-child(n) …… 後ろから数えてn番目の子となるE要素
Internet Explorer9
Firefox1Firefox2Firefox3Firefox4
Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
Safari3Safari4Safari5
Opera10
広告



E:nth-last-child(n)は、疑似クラスの一種で、
後ろから数えてn番目の子となるE要素にスタイルを適用する際に使用します。

nの部分には、整数・奇数を表すodd・偶数を表すeven・数式を指定することができます。
例えば、数式で奇数を指定する場合には2n+1、数式で偶数を指定する場合には2n+0となります。

■セレクタの書式・スタイルを適用する対象

書式
E:nth-last-child(n) {プロパティ名:値;}
適用対象
後ろから数えてn番目の子となるE要素

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

table.sample tr {background-color:#CCFFCC;}
table.sample tr:nth-last-child(3) {background-color:#FFCCCC;}

HTMLソース

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css”>
</head>
<body>

<table class=”sample”>
<tr><td>みかん</td><td>10箱</td></tr>
<tr><td>りんご</td><td>20盛</td></tr>
<tr><td>バナナ</td><td>50房</td></tr>
<tr><td>メロン</td><td>8個</td></tr>
<tr><td>すいか</td><td>2玉</td></tr>
<tr><td>レモン</td><td>20袋</td></tr>
<tr><td>ライチ</td><td>80個</td></tr>
<tr><td>キウイ</td><td>50個</td></tr>
<tr><td>ぶどう</td><td>30房</td></tr>
</table>

</body>
</html>

↓↓↓

ブラウザ上の表示

みかん 10箱
りんご 20盛
バナナ 50房
メロン 8個
すいか 2玉
レモン 20袋
ライチ 80個
キウイ 50個
ぶどう 30房

■関連項目

要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する
全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する
classセレクタ(クラスセレクタ) …… 特定のclass名がつけられた要素にスタイルを適用する
idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する
:link擬似クラス …… 未訪問のリンクにスタイルを適用する
:visited擬似クラス …… 訪問済のリンクにスタイルを適用する
:hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する
:active擬似クラス …… クリック中の要素にスタイルを適用する
:focus擬似クラス …… フォーカスされた要素にスタイルを適用する
:lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する
:first-child擬似クラス …… 最初に現れる子要素にスタイルを適用する
:first-line擬似要素 …… 要素の最初の行にスタイルを適用する
:first-letter擬似要素 …… 要素の最初の文字にスタイルを適用する
:before擬似要素 …… 要素の直前に内容を挿入する
:after擬似要素 …… 要素の直後に内容を挿入する
属性セレクタ …… 特定の属性を持つ指定要素にスタイルを適用する
属性(値)セレクタ …… 特定の属性(値)を持つ指定要素にスタイルを適用する
属性(値候補)セレクタ …… 属性値候補と一致した場合にスタイルを適用する

E[foo^=”bar”] …… foo属性の値がbarで始まるE要素CSS3
E[foo$=”bar”] …… foo属性の値がbarで終わるE要素CSS3
E[foo*=”bar”] …… foo属性の値にbarを含むE要素CSS3
E:root …… 文書のルートとなる要素CSS3
E:nth-child(n) …… n番目の子となるE要素CSS3
E:nth-last-child(n) …… 後ろから数えてn番目の子となるE要素CSS3
E:nth-of-type(n) …… n番目のその種類の要素CSS3
E:nth-last-of-type(n) …… 後ろから数えてn番目のその種類の要素CSS3
E:last-child …… 子として最後のE要素CSS3
E:first-of-type …… 最初のその種類の要素CSS3
E:last-of-type …… 最後のその種類の要素CSS3
E:only-child …… 子として唯一となるE要素CSS3
E:only-of-type …… 子として唯一となるその種類の要素CSS3
E:empty …… 要素内容が空となるE要素CSS3
E:target …… リンクのターゲット先となるE要素CSS3
E:enabled …… 有効となっているユーザーインターフェース要素(テキストエリアなど)CSS3
E:disabled …… 無効となっているユーザーインターフェース要素(テキストエリアなど)CSS3
E:checked …… チェックされているユーザーインターフェース要素(ラジオボタン・チェックボックスなど)CSS3
E:not(s) …… sで指定するセレクタに当てはまらないE要素CSS3
E ~ F …… E要素の後ろにある同じ階層のF要素CSS3

複数のセレクタ …… 複数のセレクタに同じスタイルを適用する
子孫セレクタ …… 子孫要素にスタイルを適用する
子セレクタ …… 子要素にスタイルを適用する
隣接セレクタ …… 直後に隣接している要素にスタイルを適用する

広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.