CSS Bitişik Kardeş Seçiciler (Next Sibling Selector)
CSS bitişik kardeş seçiciler (next sibling selector) biri biri ardına gelen aynı seviyedeki elemanlara stil tanımlaması için kullanılır. Genel yapısını bir örnek ile gösterelim.
h2+h3{margin:-1 em;}
Örneğin bir h3 elemanına stil uygulamak istiyoruz. Ancak bu stili h2 elemanından sonra gelen ilk h3 elemanlarına uygulamak istediğimiz durumlarda kullanılır. Genel uygulamalarda kullanılan bir durumdur. Biz genelde h2 ve h3 arasındaki aralığı ayarlamak için bu durumla karşılaşırız. Yalnız dikkat edilmesi gereken çok önemli bir husus var. O da sadece h2 elemanından sonra gelen ilk h3 elemanına uygulanması. İkinci, üçüncü ya da sonrasına bu stil uygulanmaz.
Örnek verecek olursak:
<html>
<head>
charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
h2 + h3 {
margin: -1em;
}
</style>
</head>
<body>
<h2>Baslık 2 <em>metni</em></h2>
<h3>Baslık 3 metni</h3>
<p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
</body>
</html>
Yukarıdaki kodun ekran çıktısı aşağıdaki gibi olacaktır.
Sonuç olarak konunun başında söylediğimiz gibi CSS, (X)HTML elemanlarının kendi aralarındaki ilişkileri kullanarak bize birçok avantaj sağlar. Bu sayede birçok kod yığınından kurtulmuş oluruz ve kodlarımız bir düzene girer. Bu kuralları uyguladıkça önemini daha iyi anlayacağız. Çocuk Seçicileri ve Bitişik Kardeş Seçicileri‘ni Internet Explorer 7 sürümünden itibaren desteklemeye başlamıştır. Bu nedenle kullanımı konusunda dikkat etmeliyiz.
CSS bitişik kardeş seçiciler (next sibling selector) konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
