CSS ファースト オブ クラス
CSS :first-of-type セレクターは、要素のグループ内でそのタイプの最初の要素を選択するために使用されます。 たとえば、段落のグループがある場合、:first-of-type セレクターはグループの最初の段落を選択します。
このセレクターは、特定の要素を選択するために、child セレクターなどの他のセレクターと組み合わせて使用されることがよくあります。 たとえば、次のコードは、ページの最初の div 要素の最初の段落を選択します。
div:first-child > p:first-of-type {
/* CSS code */
}
CSS ファースト オブ クラスとは
CSS セレクターは、スタイルを設定する要素を選択します。
最も基本的なセレクターは要素セレクターで、タグ名で要素を選択するために使用されます。 たとえば、要素セレクター p は、ページ上のすべての <p> 要素を選択します。
クラス セレクターは、クラス名で要素を選択するために使用されます。 たとえば、クラス セレクター .example は、クラス example を持つすべての要素を選択します。
id セレクターは、id によって要素を選択するために使用されます。 たとえば、id セレクター #example は、id = "example" を持つ要素を選択します。
クラス example の最初の部分を選択するには、CSS セレクタ example: first を使用します。
クラス セレクターを持つ最初の要素は、指定されたクラスを持つ最初の要素を選択するために使用されます。 たとえば、最初の <p> 要素をクラス test でスタイルしたい場合、最初の要素を次のようなクラス セレクターで使用します。
p.test:first-child {
クラスセレクターを持つ最初の要素は、特定のクラスを持つ最初の要素を、そのクラスを持つ他の要素とは異なるスタイルにしたい場合に役立ちます。 これは、リストの最初の要素を他のリスト項目とは異なるスタイルにするためによく使用されます。
コード例:
<head>
<style>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
</body>
CSS ファースト オブ クラスを実装する
クラスの最初に CSS を実装するには、いくつかの方法があります。
最も一般的な方法は、HTML ドキュメント内の他のコードの前に CSS コードを配置することです。 これにより、CSS コードが最初に解析され、他のコードよりも優先されます。
クラスの最初に CSS を実装する別の方法は、外部 CSS ファイルを使用することです。
CSS を使用する場合、最初に行うことは、スタイルを設定する要素を選択することです。 要素の id、class、または tag を使用できます。
要素を選択したら、CSS プロパティを使用してスタイルを設定できます。 たとえば、color プロパティを使用して要素の色を変更したり、font-size プロパティを使用して要素のフォントのサイズを変更したりできます。
コード例:
<html>
<head>
<style>
p:first-of-type {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
<p>The third paragraph</p>
<p>The fourth paragraph</p>
</body>
</html>
まとめ
クラスで最初の要素を選択する方法はいくつかありますが、CSS セレクタ first-child を使用するのが最も一般的です。 このセレクターは、選択している要素の子である任意のタイプの最初の要素を選択します。
アイテムのリストがあり、item クラスの最初のアイテムを選択したい場合は、ul > li:first-child CSS セレクターを使用します。 したがって、このブログから、CSS ファースト オブ クラスに関する完全な情報を得ることができます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn