08.11.2015 ,
yorum yapılmadı ,
3.333 kez okundu.
Blog sayfamı takip edenler bilir son üç paylaşımım CSS selectors (seçiciler) üzerine olmuştur. Aslında diyebilirsiniz ki, bu çok basit bir konu bu kadar uzatmaya gerek yok. Fakat basit olsa bile birçok kişi sadece temel birkaç seçiciyi kullanıyor. O yüzden örneklerle tüm seçicileri anltamasam da birçoğunu anlatmaya çalışıyorum. Bu paylaşımımda anlattığım seçicilerin kullanımı çok zevkli aslında. Örnekleri bilgisayarınızda kullanarak daha güzel anlayabilirsiniz.
Child Selectors (>)
Bir HTML elemanının çocuğu durumundaki elemanlara CSS özelliklerini tanımlamak için kullanılır.
Örneğin:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.anarsamadov.net</title>
<style type="text/css">
div.genel > div
{
color:#FF0004;
}
</style>
</head>
<body>
<div class="genel">
<div class="bir">sınıf bir</div>
<div class="iki">sinif iki</div>
<div id="uc">id üç</div>
<div>test yazısı</div>
</div>
<div class="disdaki">bu genel divinin dışındaki divdir.</div>
</body>
</html>Örnekte göründüğü üzere sınıf ismi genel olan div içerisindeki tüm div`lerin yazı rengini kırmızı yaptık. Genel div`inin dışındaki div elemanında ise herhangi bir değişiklik olmadı. Çünkü çocuk durumunda değil.
Adjacent Sibling Selector
Bitişik kardeş seçiciler, aynı ebeveyin içerisinde olan ve belirlenen elemandan hemen sonra gelen elemana CSS özelliklerini tanımlamak için kullanılır.
Örneğin:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.anarsamadov.net</title>
<style type="text/css">
div.bir + div
{
color:#FF0004;
}
div.genel + div.disdaki
{
color:#FF0004;
}
</style>
</head>
<body>
<div class="genel">
<div class="bir">sınıf bir</div>
<div class="iki">sinif iki</div>
<div id="uc">id üç</div>
<div>test yazısı</div>
</div>
<div class="disdaki">bu genel divinin dışındaki birinci divdir.</div>
<div class="disdaki">bu genel divinin dışındaki ikinci divdir.</div>
</body>
</html>Kısaca açıklamak gerekirse önce css kodunda div.bir + div diyerek sınıf ismi bir olan div`den hemen sonra gelen div içerisindeki yazıyı kırmızı yap dedik. Daha sonra div.genel + div.disdaki diyerek sınıf ismi genel olan div`den hemen sonra gelen sınıf ismi disdaki olan div içerisindeki yazı rengini kırmızı yap dedik. Burada önemli olan belirlenen elemanların kardeş olmaları. Yani hemen sonra gelmesi, bitişik olması, aralarında başka bir elemanın olmamasıdır.
General Sibling Selectors
Genel kardeş seçiciler. Kardeş seçiciler gibi aslında. Sadece belirlenen elemandan sonra gelen elemanı veya elemanları etkiler. Önemli nokta aynı ebeveyn içerisinde bulunmaları gerekir.
Örneğin:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.anarsamadov.net</title>
<style type="text/css">
div.bir ~ div
{
color:#0015FF;
}
div.genel ~ div.disdaki
{
color:#FF0004;
}
</style>
</head>
<body>
<div class="genel">
<div class="bir">sınıf bir</div>
<div class="iki">sinif iki</div>
<div id="uc">id üç</div>
<div>test yazısı</div>
</div>
<div class="disdaki">bu genel divinin dışındaki birinci divdir.</div>
<div class="disdaki">bu genel divinin dışındaki ikinci divdir.</div>
</body>
</html>Örnek kodu kaydetip incelerseniz göreceksiniz ki, ilk css kodumuzda belirttiğimiz üzere sınıf ismi bir olan div`den sonra gelen tüm div elemanları içerisindeki yazılar mavi renkte. Ama sınıf ismi disdaki olan div elemanları içerisindeki yazılar mavi renkte değil. Oysa biz ilk kodumuzda sınıf ismi bir olan div elemanından sonrakı tüm div elemanlarını mavi yap demiştik. Tanımlamada da belirttiğim üzere önemli olan aynı ebeveyn içerisinde olmaları. Sınıf ismi disdaki olan div elemanları aynı ebeveyn içerisinde olmadığından bir sonraki css kodunun özelliklerini taşıyorlar.
Yorum yapın..