[CSS] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-type

Study / Javascript, Jquery, Css    作成日付 : 2019/12/03 07:21:20   修正日付 : 2019/12/03 07:22:19

こんにちは。明月です。


CSSの擬似クラスは役12個ごろありますが、そのなかで「nth-child」、「nth-of-type」、「nth-last-child」、「nth-last-of-type」に関して調べてみました。

<HTML>
 <HEAD>
  <script src="jquery-1.12.1.min.js" language="javascript"></script>
  <style>
    table{
      border-top:1px solid #000;
      border-left:1px solid #000;
      padding:0px;
      border-spacing:0px;
    }
    th,td{
      border-right:1px solid #000;
      border-bottom:1px solid #000;
      width:100px;
    }
  </style>
 </HEAD>
 <BODY>
  <table>
    <tbody>
      <tr>
        <td>
          <p>1</p>
          <p>2</p>
        </td>
        <td>
          <p>3</p>
          <p>4</p>
        </td>
      </tr>
      <tr>
        <td>
          <p>5</p>
          <span>6</span>
        </td>
        <td>
          <p>7</p>
          <span>8</span>
        </td>
      </tr>
    </tbody>
  </table>
 </BODY>
</HTML>

先、nth-childやnth-last-childは要素のn番目を選択することです。

offsetタイプで数えることではないので初めの番後は「1」から始まります。

(プログラムで配列などを数える時にoffset概念で「0」から数えますが、CSSの場合は人間が数えるみたいに「1」から始まります。)


上の例のテーブルで「4」を選択するようには「tbody > tr:nth-child(1) > td:nth-child(2)　> p:nth-child(2)」で選択すると選択されます。

tbody > tr:nth-child(1) > td:nth-child(2)　> p:nth-child(2) {
    background-color: #123
}

でも、nth-childで「8」番を選択しようと思うと少し迷ってしまいます。なぜなら、8番のタグは「p」タグではなく「span」タグなのです。

簡単に考えるとその「td」の中である「span」タグは一つだけなので「tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-child(1)」で選択するとできそうです。

でも、実際はできないですね。


理由はnth-childの選択子はタグの要素に関係しずに、選択するからです。つまり、span:nth-child(1)の場合はtr:nth-child(2)の派生タグでspanタグがないので、何も選択されない状況になります。

纏めて、上のspanタグを選択したいなら「tbody>tr:nth-child(2)>td:nth-child(2)>span:nth-child(2)」の選択子で選択しなければならないです。


この状況になると何か迷いますね。単純な構造ならすぐ気づきますが、複雑なタグ構造なら迷ういますね。

それでタグ別で順番を選択できる選択子はnth-of-typeです。このことは同じレベルの同じタグ要素のn番目を選択するのができます。

tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-of-type(1){
  background-color:#123;
}

その後は「nth-last-child」と「nth-last-of-type」の選択子です。この選択子はネーミングで気づきますが、逆に選択する選択子です。

今回は「6」と「5」を選択しましょう。

tbody > tr:nth-child(2) > td:nth-child(1) > span:nth-last-child(1){
  background-color:red;
}
tbody > tr:nth-child(2) > td:nth-child(1) > p:nth-last-of-type(1){
  background-color:blue;
}


上のタグを見れば、逆の順番で最初が赤色でpタグで逆に最初タグが青色になります。

つまり、6番が赤色で5番が青色になります。

◀前の投稿[CSS] 属性選択子
次の投稿▶[CSS] 疑似クラス - first-child, last-child, first-of-type, last-of-type
#css,#selector
「Study / Javascript, Jquery, Css」の他投稿
最新投稿