CSS Seçiciler(Selector)-2
11) X[Y=’Z’] Seçicisi 
X nesnesinde bulunan y niteliğine eşit z’leri seçmek amacı ile kullanılır.
/* * denemeye eşit olan title niteliğini seçerek yazı rengini mavi yapar. */ a[title='deneme'] { color: blue }
12) X[Y*=’Z’] Seçicisi 
X nesnesin bulunan y niteliğinde z ifadesi geçen nesneleri seçer.
/* * title niteliğinde deneme ifadesinin olduğu linkleri mavi yapar. */ a[title*='deneme'] { color: darkblue }
13) X[Y^=’Z’] Seçicisi 
X nesnesinde bulunan Y niteliğindeki Z ile başlayan nesneleri seçer.
/* * href niteliğindeki https ile başlayan linklerin yazı rengini mavi yapar */ a[href^='https'] { color: blue }
14) X[Y$=’Z’] Seçicisi 
X nesnesinde bulunan Y niteliğindeki Z ile biten nesneleri seçer.
/* * href niteliğindei '.com' ile biten linklerin yazı rengini mavi yapar. */ a[href$='.com'] { color: blue }
15) X[Y~=’Z’] Seçicisi 
X nesnesinde bulunan Y niteliğindeki Z ifadesi geçen nesneleri seçmek için kullanılır.
/* * Title niteliğinde deneme ifadesi geçen linklerin rengini mavi yapar. */ a[title~='deneme'] { color: blue }
Not: X[Y*=’Z’] seçicisinden farklı olarak Z ifadesi direk olarak bir ifade ise seçilir.
16) X:CHECKED Seçicisi 
X form nesnesinde seçili olan ögeleri seçmek için kullanılır.
/* * Radio inputlarda seçili nesnedeki labeli seçerek rengini mavi yapar. */ input[type=radio]:checked + label { background-color: blue }
17) X::BEFORE VE X::AFTER Seçicisi 
Nesne öncesine ve sonrasına öge ekler.
/* * Li etiketi öncesine -once- ifadesi ekler. */ ul li::before { content: '-once-' } /* * Li etiketi sonrasına-sonra- ifadesi ekler. */ ul li::after { content: ' -sonra- ' }
18) X:HOVER Seçicisi 
Seçili nesnenin üzerine fare geldiği zaman işlem yapar.
/* * Link nesnesinin üzerine fare geldiği zaman link mavi olur. */ a:hover { background-color: blue }
19) X:NOT(Y) Seçicisi 
Bu seçici, değil ise anlamına gelir.
/* * Lifeacode sınıflı ama id'si deneme olmayan, arka plan rengi mavi olur. */ .lifeacode:not(#deneme) { background-color: blue }
20) X::FİRST-LETTER VE X::FİRST-LİNE Seçicisi 
::first-letter, X nesnesinin ilk harfi üzerinde işlem yapar.
::first-line X nesnesinin ilk satırı üzerinde işlem yapar.
/* * div nesnesinin ilk harfini 20px yapar. */ div::first-letter { font-size: 20px } /* * div nesnesinin ilk satırının arka plan rengini mavi yapar. */ div::first-line { background-color: blue }
Benzer Konular:
CSS Seçicileri(Selector)-1 sayfasına ulaşmak için tıklayın