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
Kimler Neler Demiş?