Snippet'larım

Apply a style to the first child in an element in CSS

Nis 11, 2024 #snippet
---
1 min
1
<div>
2
  <h2>First sub header</h2>
3
  <p>Content</p>
4
  <h2>Second sub header</h2>
5
  <p>Content</p>
6
</div>

CSS'de yukarıdaki div gibi bir elementin ilk öğesini seçmek istiyorsanız, aşağıdaki selector'ü kullanabilirsiniz.

1
div {
2
  *:first-child {
3
    background-color: red;
4
  }
5
}

Yalnızca ilk öğe h2 ise stil uygulamak istiyorsanız, :is() selector ekleyebilirsiniz.

1
div {
2
  *:first-child:is(h2) {
3
    background-color: red;
4
  }
5
}