CSS SEÇİCİLERİ

ID SEÇİCİLER

Web sayfasındaki DOM elemanlarının birer id değerleri vardır ve o nesneye mahsustur.Aynı id’ye sahip ikinci bir nesne olamaz.Bu nesneleri birbirinden ayırmak için yapılan bir düzenlemedir.Belirtilen id’ye stil aktarabiliriz.Sayfada tek bir nesneyi belirttiğimiz için stil sadece o nesneye uygulanacaktır.ID seçiciler #(diyez) işareti ile belirtilir.

<style>
#div1 { background-color:red;}
#div2 { background-color:pink;}
</style>

<div id="div1">Kırmızı alan</div>
<div id="div2">Pembe alan</div>

<style>

#div1 { background-color:red;}

#div2 { background-color:pink;}

</style>

<div id="div1">Kırmızı alan</div>

<div id="div2">Pembe alan</div>

SINIF SEÇİCİLER

Aynı stilin bir veya birden fazla nesneye verilmesi veya bir nesneye birden fazla stilin uygulanması anlamına gelir.Aşağıdaki örnek açıklayıcı olacaktır.

<style>
.kirmizi { background-color:red;}
span.sag { background-color:#09F;}
span.sol { background-color:#0C3;}
.gri { background-color:#CCC;}
.gri.iptal { background-color:#F6C;}
</style>

<div class="gri">
<div class="kirmizi">1. Alan</div>
<p class="kirmizi">2.Alan</p>
<span class="sag">Mesaj Gönder</span>
<span class="sol">Mesaj Gönder</span>
<span class="gri iptal">İptal</span>
</div>

<style>

.kirmizi { background-color:red;}

span.sag { background-color:#09F;}

span.sol { background-color:#0C3;}

.gri { background-color:#CCC;}

.gri.iptal { background-color:#F6C;}

</style>

<span class="sag">Mesaj Gönder</span>

<span class="sol">Mesaj Gönder</span>

<span class="gri iptal">İptal</span>

</div>

Kirmizi stili <div> ve <p> nesnelerine uygulanıyor.Buna ilaveten sağ ve sol stilleri ise <span> nesnelerine uygulanıyor.ID seçiciden farkı tek nesneye uygulanmamasıdır.Gri stilinin aynı zamanda bir <div>’e ve .gri.iptal stilinin ise <span>’a uygulanması çoklu sınıf örneğine güzel bir örnektir.

TAG SEÇİCİLER

HTML nesneleri aynı zamanda otomatik seçiçidir.Dikat edilecek husus, stillerin sayfadaki aynı türdeki nesnelere uygulanmasıdır.

<style>
div { background-color:red;}
p { background-color:#0C3;}
span { background-color:#CCC;}
</style>

<div>
<p>2.Alan</p>
<span class="sag">Mesaj Gönder</span>
</div>

<style>

div { background-color:red;}

p { background-color:#0C3;}

span { background-color:#CCC;}

</style>

<div>

<span class="sag">Mesaj Gönder</span>

</div>

DİĞER SEÇİCİLER

Web sayfası tasarlanırken nesnelerin içerisine (altına) başka nesnelerde yerleştirilebilir.Bu şekilde arka arkaya devam eden hiyerarşik bir yapı oluşacaktır.Aşağıdaki HTML sayfasını dikkatlice inceleyiniz

<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
<title> Stil öğreniyorum</title>
</head>
<body>
<p>
          <a>www.google.com</a><br>
          <strong>Kalın yazı</strong>
</p>
<ul> 
     <li> Liste 1 </li>
     <li> Liste 2 <br><em>İtalik Yazı</em><br><span>Span</span></li>     
</ul>
</body>
</html>

<html>

<head>

<title> Stil öğreniyorum</title>

</head>

<body>

<p>

<a>www.google.com</a><br>

<strong>Kalın yazı</strong>

</p>

<ul>

<li> Liste 1 </li>

<li> Liste 2 <br><em>İtalik Yazı</em><br><span>Span</span></li>

</ul>

</body>

</html>

Bu yapıda her düzey altında bir alt düzey bulunup bu düzeylerde de nesneler bulunmaktadır.Her alt düzeydeki nesneler bir üstekinin çocuğu ,iki seviye üstündekinin ise torunu konumundadır.

ÇOCUK SEÇİCİLER(E>F)

<p> paragrafını ebeveyn olarak düşünürsek <a> ve <strong> nesneleri çocuk olacaktır.Aynı şekilde <ul> nesnesinin çocukları iki adet <li> nesnesidir.Diğer <li> nesnesinin altındaki nesneler seçilmez.Stilin uygulama şekli ise şöyledir.

<style>
p > a {color:#F00}
ul li> em{color:#03F}
</style>
<p>
          <a>www.google.com</a><br>
          <strong>Kalın yazı</strong>
</p>
<ul> 
     <li> Liste 1 </li>
     <li> Liste 2 <br>
       <em>İtalik Yazı</em><br>
      <span>Span</span>
      </li>     
</ul>

<style>

p > a {color:#F00}

ul li> em{color:#03F}

</style>

<p>

<a>www.google.com</a><br>

<strong>Kalın yazı</strong>

</p>

<ul>

<li> Liste 1 </li>

<li> Liste 2 <br>

<em>İtalik Yazı</em><br>

</li>

</ul>

2.<li> nesnesinin altında <em> ve <span> çocuk olduğu için <em> üzerinden seçim yapıldığından <em> mavi yazılacaktır.

TORUN SEÇİCİLER (E F)

Nesnenin iki düzey altındaki nesneler eğer birbirlerine bağlı iseler o nesnenin torunlarıdır.Bu nesneler boşluk ile birbirinden ayrılır.

<style>
body a {color:#F00}
html ul span{ color:green}
ul em{color:#00F}
</style>
<p>
          <a>www.google.com</a><br>
          <strong>Kalın yazı</strong>
</p>
<ul> 
     <li> Liste 1 </li>
     <li> Liste 2 <br>
       <em>İtalik Yazı</em><br>
      <span>Span</span>
      </li>     
</ul>

<style>

body a {color:#F00}

html ul span{ color:green}

ul em{color:#00F}

</style>

<p>

<a>www.google.com</a><br>

<strong>Kalın yazı</strong>

</p>

<ul>

<li> Liste 1 </li>

<li> Liste 2 <br>

<em>İtalik Yazı</em><br>

</li>

</ul>

Burada <body> nesnesi 2.düzeyde, <a> nesnesi ise 4. düzeydedir.<a>,<body>’nin torunu konumundadır.Aynı şekilde <li>’de öyledir.<ul> nesnesinin torunu ise <em>’dir.Eğer <em>’in altında da nesneler olsaydı onlara pembe rengi uygulanmayacaktı.Torununun torunu gibi bir ifadeyi html ul span’da görmekteyiz.

BİTİŞİK KARDEŞ SEÇİCİLER (E+F)

Aynı düzeydeki yan yana nesnelerden ikincisine stil uygulanır.

<style>
p + div {background-color:#3CF;}
</style>
<p>
          <a>www.google.com</a><br>
          <strong>Kalın yazı</strong>
</p>

<div>Katman</div>

<ul> 
     <li> Liste 1 </li>
     <li> Liste 2 <br>
       <em>İtalik Yazı</em><br>
      <span>Span</span>
      </li>     
</ul>

<style>

p + div {background-color:#3CF;}

</style>

<p>

<a>www.google.com</a><br>

<strong>Kalın yazı</strong>

</p>

<div>Katman</div>

<ul>

<li> Liste 1 </li>

<li> Liste 2 <br>

<em>İtalik Yazı</em><br>

</li>

</ul>

EVRENSEL SEÇİCİLER (*)

Belirtilen nesne altındaki tüm nesneler stil uygulamak için kullanılır.

<style>
p *{background-color:#3CF;}
</style>
<p>
          <a>www.google.com</a><br>
          <strong>Kalın yazı</strong>
</p>

<div>Katman</div>

<ul> 
     <li> Liste 1 </li>
     <li> Liste 2 <br>
       <em>İtalik Yazı</em><br>
      <span>Span</span>
      </li>     
</ul>

<style>

p *{background-color:#3CF;}

</style>

<p>

<a>www.google.com</a><br>

<strong>Kalın yazı</strong>

</p>

<div>Katman</div>

<ul>

<li> Liste 1 </li>

<li> Liste 2 <br>

<em>İtalik Yazı</em><br>

</li>

</ul>

<p> nesnesinin altındaki bütün nesnelere mavi zemin stilini uyguladı.

ÖZELLİK SEÇİCİLERİ

Nesnelerin içerisinde barındıkları alt özelliklere göre de o nesnelere stil uygulayabiliriz.Örneğin; link kaynağı com ile biten linklere stil verebiliriz.

<style>
a[href$="com"]{background-color:#3CF;
               text-decoration:none;}
</style>

          <a href="www.google.com">www.google.com</a><br>
          <a href="www.yahoo.com">www.yahoo.com</a>

<style>

a[href$="com"]{background-color:#3CF;

text-decoration:none;}

</style>

<a href="www.google.com">www.google.com</a><br>

<a href="www.yahoo.com">www.yahoo.com</a>

Şifremi Kaybettim

soru ekleme