” etiketine sahip olması gerekiyorsa. Bu gibi durumlarda “ :vardır() ” ebeveyn seçici sözde sınıfı kullanılır.
Bu gönderi şunları açıklayacaktır:
- Alt Öğelerini Belirterek Bir Ana Öğeye Nasıl Stil Verilir?
- Tüm Alt Öğeler Nasıl Seçilir?
- Tüm Doğrudan Alt Öğeler Nasıl Seçilir?
Alt Öğelerini Belirterek Bir Ana Öğeye Nasıl Stil Verilir?
İlk olarak, aşağıdaki gibi iki 'div' öğesi içeren bir HTML dosyası oluşturun:
- iki ekle' 'aynı sınıfa sahip elemanlar' ebeveyn-div ”.
- İlki iki 'içerir' ' elementler.
- İkinci “
” elemanı “ ' ve ' ”: < div sınıf = 'ebeveyn-div' >
< p > Merhaba < / p >
< p > dünya < / p >
< / div >
< div sınıf = 'ebeveyn-div' >
< h1 > Merhaba < / h1 >
< p > 'h1' etiketim var < / p >
< / div >“
” elemanına stil vermek gerekirse, “ ” öğesi, ardından çocuğu tutarak ana öğenin stilini ayarlayabiliriz. Bu amaçla “ :vardır() ” seçici.
Her iki “
” öğesinden “” öğesini içeren öğeyi “ kullanarak seçin. .class-name:has(alt-adı) ”:
.parent-div : vardır ( h1 ) {
arka plan rengi : #103e6d ;
renk : deniz kabuğu ;
Genişlik : 150 piksel ;
yükseklik : 150 piksel ;
sınır yarıçapı : elli% ;
Metin hizalama : merkez ;
}Burada, ana öğeye aşağıdaki CSS özelliklerini uyguladık:
- “ arka plan rengi ” öğesinin arka plan rengini belirtmek için kullanılır.
- “ renk ” öğe metin rengini belirtir.
- “ Genişlik ”, eleman genişliğini tanımlamak için kullanılır.
- “ yükseklik ” elemanın yüksekliğini belirtir.
- “ sınır yarıçapı ” özelliği, elemanın yuvarlatılmış köşelerini ayarlamak için kullanılır.
- “ Metin hizalama ”, metin hizalamasını belirtir.
Çıktı
Tüm Alt Öğeler Nasıl Seçilir?
Ebeveyn seçicinin yardımıyla alt öğeyi seçmek için verilen örneği inceleyin.
Misal
Bir HTML sayfası oluşturmak için aşağıdaki adımları uygulayın:
- İki ' içeren bir div öğesi ekleyin. ” etiketleri ve bir “ ” sınıfa sahip etiket ” çocuk-div ”.
- Çocuk ' div ” öğesi bir “
< div sınıf = 'ebeveyn-div' >” öğesi içerir:
< p > Merhaba < / p >
< p > dünya < / p >
< div sınıf = 'çocuk-div' >
< p > ben çocuk div'im < / p >
< / div >
< / div >Ebeveyn aracılığıyla alt öğeleri seçebiliriz '
' sınıf. Bu sadece doğrudan “ p ” elemanları değil, aynı zamanda iç içe geçmişleri de seçer” p ' elementler: .parent-div p {
arka plan rengi : #7F167F ;
font ailesi : el yazısı ;
yazı Boyutu : 25 piksel ;
Metin hizalama : merkez ;
renk : Beyaz duman ;
}Çıktı
Tüm Doğrudan Alt Öğeler Nasıl Seçilir?
Ebeveyn div'in doğrudan çocuğunu seçmek için ' > ” sembolü. Bu, ebeveynin doğrudan çocuğu olan tüm 'p' öğelerini seçmeye yardımcı olacaktır '
”. Örneğin, aşağıdaki CSS özelliklerini uyguladık: .parent-div > p {
arka plan rengi : #7F167F ;
font ailesi : el yazısı ;
yazı Boyutu : 30 piksel ;
Metin hizalama : merkez ;
renk : Beyaz duman ;
}“ font ailesi ” seçilen öğenin yazı tipini belirtir ve “ yazı Boyutu ” yazı tipinin boyutunu tanımlamak için kullanılır:
Çıktı
HTML ve CSS'de CSS üst seçicileri hakkında tartıştık.
Çözüm
CSS'de “ :vardır() ” seçici, bir ebeveyn seçici sözde sınıfı olarak kullanılır. Özellikle üst öğeleri seçmek için kullanılır. Örneğin, ' .parent-div:has(h1) ”, “ olan üst öğeyi seçer. ' elementler. Ana elemanın alt elemanını seçmek için “ .parent-div p ”. Koşul ifadesi, tüm doğrudan alt öğeleri seçmek için de kullanılabilir. Bu makalede, CSS üst seçicisi örneklerle açıklanmıştır.
- Çocuk ' div ” öğesi bir “