Css Çocuk Seçicileri
Bazı durumlarda keyfi olarak bir torun seçicisi kullanmaktansa daha ayrıntılı bir ayrım yapmak isteyebiliriz. Örneğin bir h1 elemanının altındaki strong elemanlarından sadece Çocuk Elemanı için tanımlamalar yapmak istersek (torun elemanları hariç), Bunun için çocuk bağlayıcısını kullanırız (>) büyüktür işareti.
Örnek KOD:
Örnek 3-7
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS’in yapısı</title>
<style type=”text/css”>
h1 > strong {
color: red
}
</style>
</head>
<body>
<h1>Bu <strong>koda</strong> uygulanacaktır.</h1>
<h1>Bu <em>koddaki <strong> bu kısım </strong></em> uygulama
dışıdır..</h1>
</body>
</html>
Yukarıdaki durumda sadece ilk strong elemanı için tanımlama gerçekleşecektir. İkincisi için herhangi bir stil tanımı uygulanmayacaktır.
Yukarıda ana örneğimizin bir kısmı gösterilmektedir. Ebeveyn-çocuk ilişkisini daha iyi anlamak için hazırlanmıştır. a elemanı strong‘un ebeveynidir. p elemanıda a elemanının ebeveynidir. Ancak p elemanı strong‘un ebeveyni değildir. Biz burada p > a ve a > strong şeklinde tanımlama yapabiliriz ancak p > strong tanımlamasını yapamayız.
Birde aynı seçici içinde hem torun birleştiricisini hemde çocuk birleştiricisini kullanabiliriz.
table.summary td > p
Örneğin bir h3 elemanına stil uygulamak istiyoruz ayrıca bir sonraki h2 elemanınada aynı stili 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. Örnek verecek olursak:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=“Content-Type“ content=“text/html;
charset=utf-8“ />
<title>CSS‘in yapısı</title>
<style type=“text/css“>
h2 + h3 {
margin: -1em;
}
</style>
</head>
<body>
<h2>Başlık 2 <em>metni</em></h2>
<h3>Başlık 3 metni</h3>
<p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
</body>
</html>
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.
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.
Bitişik Kardeş Seçiciler(Next Sibling Selector)
Bitişik Kardeş Seçicileri biri biri ardına gelen aynı seviyedeki elemanlara stil tanımlaması için kullanılır.
(No Ratings Yet)
Loading ...Bu yazı 22 Kasım 2009 tarihinde Aytaç Cici tarafından Css kategorisi altına yazılmış ve 157 views defa okunmuş.
Yükleniyor ...
