CSS Grup ve Yuva Seçicileri

Merhaba arkadaşlar.. CSS Stilleme ve CSS Kutu Modelleme derslerinden sonra son şimdi de CSS İleri Seviye derslerine başlıyoruz..

İlk konumuz CSS içerisinde kullanabileceğimiz yuvalama ve gruplama işlemidir..İlk önce grup seçicilerinden bahsedelim

CSS Grup Seçicileri

CSS derslerimiz boyunca aşağıda gördüğünüz şekilde CSS stil kodlarıını oluşturuyorduk;

<pre>

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

</pre>

Bu stil kodlarını daha az kod kullanarak css grup seçicileri sayesinde yapabiliriz.Bu işlem aşağıda gördüğünüz üzere, her seçici arasına bir virgün koyarak gerçekleştirilir,

h1,h2,p
{
color:green;
}

Buradaki yazım ile yukarıdaki yazım arasında fark yoktur.. Daha az kod kullanmak için aynı değişkenleri içeren seçicileri bir tutmak için grup seçicilerini kullanabilirsiniz.

CSS Yuvalama İşlemi

Yuvalama işlemi ise, bir seçicinin herhangi bir id ya da sınıfına farklı özellikler yüklemek için daha kısa kod kullanmak adına tekrar seçiciyi girmemek için yapılan bir yöntemdir.. Aşağıdaki örnekte olduğu gibi yapılan kod diziminde normalden daha az kod kullanılmıştır,


p
{
color:blue;
text-align:center;
}
.marked
{
background-color:blue;
}
.marked p
{
color:white;
}

grup ve yuva işlemleri bu kadar.. Diğer dersimizde görüşürüz.

5 thoughts on “CSS Grup ve Yuva Seçicileri

  1. Pingback: CSS Baştan Alalım? - Zingocan

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>