CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

親の最初の子であるすべての

要素をCSSでスタイル設定します

親の最初の子であるすべての

要素のスタイルを設定するには、CSS：first-childセレクターを使用します。

例

次のコードを実行して、：first-childセレクター-

を実装してみてください。 
<!DOCTYPE html>
<html>
   <head>
      <style>
         p:first-child {
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <p>This is demo text.</p>
      <div>
         <p>This is demo text, with the first child of its parent div.</p>
         <p>This is demo text, but not the first child.</p>
      </div>
   </body>
</html>

  1. 親の唯一の子であるすべての<p> 要素をCSSでスタイル設定します

    CSS：only-childセレクターを使用して、親の唯一の子であるすべての要素のスタイルを設定します。 例 次のコードを実行して、：only-childセレクターを実装してみてください <!DOCTYPE html> <html>    <head>       <style>          p:only-child {             background: orange

  2. CSSを使用した子要素の選択

    CSS子コンビネータは、親要素のすべての子要素を選択するために使用されます。 CSS子コンビネータの構文は次のとおりです。 セレクター{属性：/*値*/} CSS子孫コンビネータは、親要素のすべての子孫を選択するために使用されます CSS子孫コンビネータの構文は次のとおりです セレクターセレクター{属性：/*値*/} 例 次の例は、CSSの子と子孫のコンビネータを示しています。 * {text-align：center;ボーダー：10pxグルーブトマト;} ::first-line {box-shadow：inset 0 0 7px cornflowerblue;}