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

Study / Javascript, Jquery, Css    作成日付 : 2019/12/04 07:28:37   修正日付 : 2019/12/04 07:29:26

こんにちは。明月です。


前述で疑似クラス nth-childとnth-of-typeに関して説明しました。

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


今回は「first-child」と「first-of-type」に関して調べてみます。

簡単に「first-child」に説明すると「first-child」は「nth-child(1)」と同じ意味です。

<!DOCTYPE>
<html>
 <head>
  <style>
    table {
      border-spacing:0px;
      padding:0px;
    }
    td {
      width:200px;
    }
  </style>
 </head>
 <body>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
 </body>
</html>

上のテーブルで全ての枠を描こうと思いまして、「td」のタグで重ねないようにしようと考えています。

初めの行の初めの列だけの左上の枠を描いて全ての「td」の右下を描くと全ての枠が描くことに出来ます。

tr:first-child > td {
  border-top:1px solid #000;
}
td:first-child {
  border-left:1px solid #000;
}
td {
  border-right:1px solid #000;
  border-bottom:1px solid #000;
}

参考に「first-child」の代わりに「nth-child(1)」を入れても同じ結果になります。


td:first-of-type {
  background-color:rgba(15, 105, 35, 0.3);
}
td:last-of-type {
  background-color:rgba(92, 120, 140, 0.41);
}

◀前の投稿[CSS] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-type
次の投稿▶[CSS] 疑似クラス - only-child, only-of-type, empty, empty, root
#css,#selector
「Study / Javascript, Jquery, Css」の他投稿
最新投稿