擬似クラスで何番目かを指定する - CSS

:first-child

兄弟要素の中で最初の <p> をすべてを選択します

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
  <p>select</p>
  <p>no select</p>
</div>

<div>
  <h1>no select. is's not a 'p'</h1>
  <p>no select</p>
</div>

<div>
  <p>select</p>
  <p>no select</p>
</div>

</body>
</html>

style.css

p:first-child {  color: red; }

HTML での表示のされ方

select

no select

no select. is's not a 'p'

no select

select

no select

:last-child

兄弟要素の中で最後の <p> をすべてを選択します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
  <p>no select</p>
  <p>select</p>
</div>

<div>
  <p>no select</p>
  <h1>no select. is's not a 'p'</h1>
</div>

<div>
  <p>no select</p>
  <p>select</p>
</div>

</body>
</html>

style.css

p:last-child {color: red;}

HTML での表示のされ方

no select

select

no select

no select. is's not a 'p'

no select

select

:nth-child(n)

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul id="target">
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
    <li>list 6</li>
    <li>list 7</li>
    <li>list 8</li>
    <li>list 9</li>
    <li>list 10</li>
  </ul>
  
</body>
</html>

style.css

リスト中の 2 番目の <li> 要素を選択します。

#target li:nth-child(2) {color: red;}

HTML での表示のされ方

  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6
  • list 7
  • list 8
  • list 9
  • list 10

style.css

兄弟要素の中で 2 つおきに要素を選択します。

#target li:nth-child(2) {color: red;}

HTML での表示のされ方

  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6
  • list 7
  • list 8
  • list 9
  • list 10

:first-of-type

親要素から見て、指定された子要素の最初を選択します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="target">
    <h2>見出し</h2>
    <p>段落 1</p>
    <p>段落 2</p>
  </div>
  
</body>
</html>

style.css

#target p:first-of-type {color: red;}

HTML での表示のされ方

見出し

段落 1

段落 2

:last-of-type

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="target">
    <h2>見出し</h2>
    <p>段落 1</p>
    <p>段落 2</p>
  </div>
  
</body>
</html>

style.css

#target p:last-of-type {color: red;}

HTML での表示のされ方

見出し

段落 1

段落 2

:nth-of-type(n)

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="target">
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
      <li>list 4</li>
      <li>list 5</li>
      <li>list 6</li>
      <li>list 7</li>
      <li>list 8</li>
      <li>list 9</li>
      <li>list 10</li>
    </ul>
  </div>
  
</body>
</html>

style.css

#target li:nth-of-type(2) {color: red;}

HTML での表示のされ方

  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6
  • list 7
  • list 8
  • list 9
  • list 10

style.css

偶数のタグだけ適用されます。奇数の場合は「 2n + 1 」で奇数を指定できます。

#target li:nth-of-type(2n) {color: red;}

HTML での表示のされ方

  • list 1
  • list 2
  • list 3
  • list 4
  • list 5
  • list 6
  • list 7
  • list 8
  • list 9
  • list 10

:first-child と :first-of-type の違い

index.html

<div id="target">
  <h1>Hello, World</h1>
  <p>text 1</p>
  <p>text 2</p>
</div>

style.css

次の場合は、pタグの text 1 は色が変わらずそのままです。

#target p:first-child {color: red;}

style.css

次の場合は、pタグの text 1 は色が変わります。

#target p:first-of-type {color: red;}

「 first-child 」と「 first-of-type 」の違いは、囲んでる要素の中での順番の数え方が違います。

「 first-child 」の場合、h1 タグも含めて最初から何番目にあるかの指定になります。

一方、「 first-of-type 」は、h1 タグを含めないで p タグの最初から何番目にあるか指定します。