CSS tüm seçiciler
30 Ağustos 2015 Furkan Atabaş 4.974 Okunma Yorum Yok

CSS tüm seçiciler


CSS (3)

Konuya direk girmeden önce eğer css‘in ne olduğunu bilmiyorsanız yada biraz biliyorum ama gene de bilgi edinmek istiyorum diyorsanız CSS nedir, ne işe yarar ve nasıl kullanılır? başlıklı konuyu incelemenizi, ben css‘in ne olduğunu biliyorum ama nasıl kullanıldığını pek bilmiyorum bu konu benim için çok hızlı olur önce konuyu anlamam gerek derseniz CSS seçicileri css de elemanlar nasıl seçilir? başlıklı konuyu incelemenizi tavsiye ederim.

Bu konum css ile nesne seçimi, css ile eleman nasıl seçilir, css seçicileri başlıklı konulara yanıt olarak yayınlanmıştır. Birazdan aşağıda bir tablo ile bildiğim tüm seçicileri açıklayacağım tablonun sol tarafında kullanım  sağ tarafında ise css seçicilerin açıklamaları olacak. Tabloya geçiş yapmadan önce bu yazımda da bir css yapısının nasıl olması gerektiğini göstermek istiyorum. Tabloda bulunan seçici sütunu altındaki satırlarda bulunan örnekler aşağıdaki css yapısında bulunan nesne yerine geçecektir. Aşağıda bulunan 2 yazım şeklide işe yarar burada göstermek istediğim css uygulamalarını alt alta da yan yana da yazsak yazacağımız özellik değer ve özel karakterleri kuralına göre yazdığımızda hiçbir sorun olmayacağıdır.

nesne { özellik: değer;   özellik: değer; }

nesne {
özellik: değer;
özellik: değer;
özellik: değer;
özellik: değer; }


Css seçici tablosu

Not: Tabloda bulunan X, Y ve Z harfleri birbirinden farklı nesneleri ifade eder.

 Seçici  Açıklama
*  Tüm nesneleri seçer.
X Sadece seçilmesini istediğiniz html elemanının adı yazılır.
Örn: div, span, a, img, h1, h5, em, i, section, header, article
#X Seçilecek html elemanına verilmiş olan id değeri
Örn: <div id=”X”>…</div>
.X Css uygulanacak html elemanına ait olan class değeri yazılır.
Örn: <a class=”X” href=”…”/>

Not: Bu aşamadan sonra Seçici sütunlarına # yada . işareti koymayacağım siz istediğiniz şekilde algılayabilirsiniz. Sadece X, Y ve Z kullanacağım. Bu X,Y ve Z ler direk html seçici anlamına gelmez birer id yada class olarak algılarsanız hiç bir sorun olmaz.

 X, Y, Z  Çoklu seçiciler. Aralarına (,) koyarak ayırdığım nesnelerin tümünü seçmiş oluyorum.
 X Y  İç nesne seçici. Css de html elemanları içinde X nesnesi içerisinde bulunan Y nesnelerini seçer.
 X + Y  Bitişik seçici. Bu css seçicisi X den hemen sonra gelen Y elemanını seçer. X den önce gelen Y elemanını seçmez sadece hemen sonra gelen Y elemanını seçer. Aşağıda ki örnekte sadece 3. span seçilir.
 X > Z X içinde bulunan Z elemanlarını seçer.
Z elemanının X elemanının hemen içinde bulunması gerekir.
X içinde bir Y elemanı varsa ve Y içinde de Z elemanı varsa bu Z elemanı seçilmeyecektir.
Aşağıdaki örnekde 1,2 ve 5. spanlar seçilir.
 X~Y  Bu css nesne seçicisi X den sonra gelen tüm Y elemanlarını seçer.
X den sonra herhangi bir Z elemanı içinde Y varsa seçmez.
Sadece X den sonra gelip X ile aynı katmanda bulunan tüm Y elemanlarını seçer.
( ~ ) karakterini Q klavye kullanıyorsanız “Alt Gr” + “ü” yaptıksan sonra “Boşluk” tuşuna basarak oluşturabilirsiniz.

Not:  Aşağıda göstereceğim css seçicileri nitelik seçici olarak adlandırılır. [] Köşeli parantez içerisine nitelik adları (title,alt,class,id,href,target,src) ve niteliklerin aldığı değerler girilir.

nesne[nitelik] html_elemanı[nitelik] => şeklinde oluşturulan bu css seçicisi girilen html_elemanları içinde nitelik var ise seçer.
nesne[nitelik=’değer’]  “X” html elemanı içinde bulunan “Y” özelliğinin değeri “Z” olan elemanları seç.
Örn: title özelliği view olan a nesnelerini seç
nesne[nitelik~=’değer’] Bu css özellik seçicisi “Y” içinde “Z” kelimesi geçen “X” elemanlarını seçer.
Yani “Z = dene” olsun. Eğer “Y” için atanan değer “Bu bir denemedir” ise nesne seçilmez. “Bu bir dene medir” ise seçilir.
nesne[nitelik*=’değer’] Niteliğe atanan veri içerisinde herhangi bir yerde değer geçen nesneyi seçer.
Bir önceki örnek kodlarda “~” yerine “*” kullanılsaydı tüm nesneler seçilirdi.
nesne[nitelik^=’değer’] Nesnenin aldığı nitelik girilen değer ile başlıyorsa seçilir.
nesne[nitelik$=’değer’] Html elemanının aldığı nitelik girilen değer ile bitiyorsa.
nesne[nitelik|=’değer’] Niteliğe atanmış değer seçiciye girilmiş olan değer ile başlıyor ve sonunda “-” var ise seçer.
Yani niteliğin aldığı değer “xxx-yyyzzz” şeklinde olmalı

Not: Şimdi göstereceğim diğer tüm seçiciler için form, özellik ve filtre seçiciler gibi isimler kullanabilirsiniz.
A html nesnesi olan linkler.
Henüz hiç tıklanmamış yada hedefteki adresine girilmemiş ise “:link”
Üzerine gelindiğinde “:hover”
Tıklanıp basılı tutulduğu sürede “:active” ve “:focus”
Bırakıldığında artık web sitesine gidildiği için “:visited” değerini alırlar.
2 özelliği aynı anda alan css nesnesi en son uygulanan özellikleri alır.

X:link Ziyaret edilmemiş linkleri seçer
X:visited Ziyaret edilmiş linkleri seçer
X:hover  Nesnenin üstüne geldiğinde çalışır.
X:focus  Nesneye odaklandığında çalışır.
X:checked  Seçili form nesnelerini seçmeye yarar. Örneğin checked edilmiş radio inputları.
X:active  Aktif olmuş html nesnelerini seçer (Örneğin bir linke tıklandığında ve basılı tutulduğu sürede o link aktif edilmiş olur )
X:lang(dil) “X” nesnesine atanan “lang” niteliği “y” ise seç.
X:empty İçerisinde hiç bir şey olmayan boş nesneleri seçer.
X:target Bu özellik için nasıl bir tanımlama yapacağımı bilmediğimden işlemi örnek vermek istiyorum. Bazen sayfa içi linklemeler yaptığımız oluyor. a taglarına link olarak sayfa içerisinde bulunan bir nesnenin id değerini #iddeğeri şeklinde veriyoruz. İşte böyle bir kodlama da linke tıklanıp hedef olan nesne görüntülendiğinde hedef nesne seçilir.
X:enabled Disabled özelliği atanmamış form elemanları seçilir.
X:disabled Disabled özelliği atanmış form elemanlarını seçer.
X:required Zorunlu form nesnelerini seçer.
X:optional Zorunlu olmayan yani “required” niteliğini almamış olan form elemanlarını seçer.
X:read-only readonly niteliği taşıyan form elemanlarını seçer. (Mozilla için :-moz-read-only de yazılmalı)
X:read-write readonly niletiği taşımayan form elemanlarını seçer. (Mozilla için :-moz-read-write de yazılmalı)
X:in-range Örneğin type=”number” olan inputlar min ve max kuralına uygun value değeri almışsa seçilir.
X:out-of-range :in-range css seçicisinin tersi işlem görür. Örnek olarak type=”number” olarak ayarlanmış form elemanının değeri min=”” ve max=”” kuralları dışında ise seçilir.
X:valid Form nesnelerin de nesneye verilen kurallara uyuluyor ise bu css seçicisi çalışır. Örneğin bir inputa type olarak email atandığında (type=”email”) aynı nesnenin value değerinde bir e-posta adresi varsa bu nesne seçilmiş olur.
X:invalid Bir üstte ki seçicinin tam tersi yönünde çalışır. Form elemanlarında kurala uyulmuyorsa çalışır.
X:first-child İlk “X” nesnesini seçer.
X:last-child En son “X” nesnesini seçer.
X:not(Y) Parantez içerisine girilen nesne dışında olan “X” nesnelerini seç
X::first-letter “X” nesnesinin içeriğindeki yazının ilk harfini seçer.
X:first-line “X” nesnesinin içeriğindeki yazının ilk satırını seçer.
X:first-of-type Aynı hiyerarşide bulunan “X” nesnelerinin ilk elemanlarını seçer.(Body içindeki ilk “X” nesnesini, “Y” nesnesi içindeki ilk “X” nesnesini, “Z” nesnesi içinde bulunan ilk “X” nesnelerinin tümünü seçer.)
X:last-of-type Bir üstte bulunan “:first-of-type” seçicisinin tam tersi olarak aynı hiyerarşide bulunan tüm son “X” elemanlarını seçer.
X Y:only-of-type “X” nesnesi içerisinde sadece 1 tane olan “Y” nesnesini seçer.
X Y:only-child “X” nesnesi içerisinde sadece y nesnesi var ise seçer. (Bir üstte bulunan “:only-of-type” css seçicisinden farkı “:only-of-type” kullanıldığında seçilen nesneden 1 tane olması gerekirken “:only-child” kullanıldığında “X” nesnesi içerisinde sadece “Y” nesnesi olmalı eğer bir “Z” nesnesi de var ise seçilmez)
X Y:nth-child(n) n = sayı girilmelidir.
“X” html elemanı içerisinde “n”. sırada bulanan nesne “Y” ise seç.
X Y:nth-last-child(n) n = sayı girilmelidir.
“X” html elemanı içerisinde sondan “n”. sırada bulunan nesne “Y” ise seç.
X Y:nth-of-type(n) n= sayıı girilmelidir.
“X” html elemanı içerisinde “n”. sıradaki “Y” elemanını seç
X Y:nth-last-of-type(n) n = sayı girilmelidir.
“X” html elemanı içerisinde sonran “n”. sırada bulunan “Y” elemanını seç.
X::selection Mouse ile web sitelerinde bulunan yazıları seçtiğimizde genelde varsayılan olarak seçilen metnin arkaplanı mavi yazı rengi ise beyaz olur.
Bu seçici ile “X” nesnesi içerisinde seçilen yazının arkaplan ve yazı rengini değiştirebiliyoruz.
Eğer “X”  yerine hiçbir şey yazılmaz ise tüm içerik için geçerli olur.
:root  <html> tagını seçer.