「CSS」nth-last-of-type()で最後から指定位置の要素を取得する方法

2020年10月13日

説明
:nth-last-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、
最後から数えた位置に基づいて選択します。
構文
:nth-last-of-type( <nth> )
where
<nth> = <an-plus-b> | even | odd
htmlコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div>
<p>AA 12345.</p>
<P>BB 003.</P>
<em>CC 004</em>
<span>test 122 要素が選択されます。</span>
<strike>456789</strike>
<span>user info</span>
</div>
<div> <p>AA 12345.</p> <P>BB 003.</P> <em>CC 004</em> <span>test 122 要素が選択されます。</span> <strike>456789</strike> <span>user info</span> </div>
<div>
  <p>AA 12345.</p>
  <P>BB 003.</P>
  <em>CC 004</em>
  <span>test 122 要素が選択されます。</span>
  <strike>456789</strike>
  <span>user info</span>
</div>

CSSコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
span:nth-last-of-type(2) {
background-color: green;
}
span:nth-last-of-type(2) { background-color: green; }
span:nth-last-of-type(2) {
  background-color: green;
}

 

CSS

Posted by arkgame