Css-pseudo-class-first-child

提供:Dev Guides
移動先:案内検索

CSS-擬似クラス:first-child

説明

_:first-child_疑似クラスは、他の要素の最初の子である要素に特殊効果を追加するために使用されます。

IEで:first-childを動作させるには、ドキュメントの先頭で<!DOCTYPE>を宣言する必要があります。

次のことに注意してください-

  • 擬似クラス名は大文字と小文字が区別されません。
  • 疑似クラスはCSSクラスとは異なりますが、組み合わせることができます。

たとえば、すべての<div>要素の最初の段落をインデントするには、この定義を使用できます-

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be  indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>

      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div.This paragraph will not be effected.</p>
      </div>
   </body>
</html>

これにより、次の結果が生成されます–