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

Jul 22, 2024/

#css

/-1 min

CSS'te istediğimiz elemanı seçmek biraz dertli olabilir.

Aşağıdaki HTML'e odaklanın

1<div>
2  <h2>First sub header</h2>
3  <p>Content</p>
4  <h2>Second sub header</h2>
5  <p>Content</p>
6</div>

Bunun ilk öğesini seçmek istiyorsanız, aşağıdaki selector'ü kullanabilirsiniz.

1div {
2  *:first-child {
3    margin-top: 0;
4  }
5}

Yalnızca ilk öğenin

h2

olması durumunda stil uygulamak istiyorsanız,

:is()

selector ekleyebilirsiniz.

1div {
2  *:first-child:is(h2) {
3    margin-top: 0;
4  }
5}