ホームページ > 記事 > ウェブフロントエンド > 【CSS3】-last-of-type selector+nth-last-of-type(n) selector_html/css_WEB-ITnose
":last-of-type" セレクターは ":first-of-type" セレクターと同じ機能を持ちますが、違いは親要素の下で選択することです。型の最後の子要素。
デモ例
「:last-of-type」セレクターを使用して、コンテナ「div.wrapper」の最後の段落要素の背景をオレンジ色に設定します
(ヒント: この段落は「div」ではありません) .wrapper" ” コンテナの最後の子要素)。
HTML コード:
<div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <div>我是第一个Div元素</div> <div>我是第二个Div元素</div> <div>我是第三个Div元素</div></div>
CSS コード:
.wrapper > p:last-of-type{ background: orange;}
デモ結果:
「:n番目-最後 - of-type(n)」セレクターは、「:nth-of-type(n)」セレクターと同じです。親要素で指定された特定の子要素タイプを選択しますが、その開始方向は最後の子要素からです。その使用法は、前のセクションで紹介した「:nth-last-child(n)」セレクターと似ています。
デモ例
「:nth-last-of-type(n)」セレクターを使用して、コンテナー「div.wrapper」内の最後から 3 番目の段落の背景をオレンジ色に設定します。
HTML コード:
<div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <p>我是第四个段落</p> <p>我是第五个段落</p> <div>我是一个Div元素</div> <p>我是第六个段落</p> <p>我是第七个段落</p></div>
CSS コード:
.wrapper > p:nth-last-of-type(3){ background: orange;}
デモ結果: