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
}