[CSS]nth-childで指定行目範囲にスタイルシートを適用する

2021年8月25日

書式
tr:nth-child(n+行目1):nth-child(-n+行目2)

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
tr:nth-child(n+2):nth-child(-n+4){
background-color: skyblue;
}
</style>
<table>
<tr><td>test 111</td></tr>
<tr><td>data 222</td></tr>
<tr><td>data 333</td></tr>
<tr><td>data 444</td></tr>
<tr><td>data 555</td></tr>
</table>
<style> tr:nth-child(n+2):nth-child(-n+4){ background-color: skyblue; } </style> <table> <tr><td>test 111</td></tr> <tr><td>data 222</td></tr> <tr><td>data 333</td></tr> <tr><td>data 444</td></tr> <tr><td>data 555</td></tr> </table>
<style>
  tr:nth-child(n+2):nth-child(-n+4){
    background-color: skyblue;
  }
</style>
<table>
  <tr><td>test 111</td></tr>
  <tr><td>data 222</td></tr>
  <tr><td>data 333</td></tr>
  <tr><td>data 444</td></tr>
  <tr><td>data 555</td></tr>

</table>

 

CSS

Posted by arkgame