CSS seçicileri konusunda dağınık olarak birkaç kaynak gördüm sitede ama açıp herkesin gerektiğinde kullanabileceği derli toplu ve kapsamlı bir kaynak göremediğim için yeni bir başlık açmak ve cheatsheet olarak kullanılabilmesi amacıyla tüm css seçicilerini içeren bir yazı eklemek istedim.
*: Tüm html elemanları seçilir
#id: id ID'sine sahip olan html elemanı seçilir
.sinif: sinif class'ına (sınıfına) sahip tüm html elemanları seçilir
.sinif1.sinif2: Aynı anda hem sinif1 hem de sinif2 class'larına sahip olan html elemanları seçilir
p: Tüm p'ler seçilir
a: Tüm a'lar seçilir
div: Tüm div'ler seçilir
(bu kural tüm html etiketlerine uygulanabildiği için teker teker yazmaya devam etmiyorum)
p.sinif: sinif class'ına sahip olan p etiketleri seçilir (bu kural da yine tüm html etiketleri için genellenebilir)
, (virgül): css kodlarının birden fazla seçiciye sahip olması istendiğinde kullanılır, böylece ortak css kodlarına sahip olan html elemanları için daha az css kodu yazılmış olur. örneğin #id1, #id2 olarak yazıldığında hem id1 ID'sine hem de id2 ID'sine sahip html elemanları için kullanılır ve virgül sayısı gerektiği kadar çoğaltılabilir.
etiket etiket (boşluk): Arasına boşluk konarak yazılan seçicilerde ilk seçici altında yer alan ikinci seçiciler aranır ve katman sayısı artırılabilir. Örneğin p a seçicisi p altındaki a html etiketlerini seçer.
etiket>etiket (> karakteri): Doğrudan ilk seçicinin altında yer alan etiketler için kullanılır. Örneğin p>a seçicisi ile doğrudan p'nin altında yer alan tüm a etiketleri seçilir.
etiket+etiket (+ karakteri): bir seçiciden hemen sonra yer alan etiketleri bulmak için kullanılır
etiket~etiket (~karakteri): bir seçiciden hemen önce yer alan etiketleri bulmak için kullanılır
[attribute]: attribute seçicisidir. örneğin href özelliği olan a etiketlerini seçmek için [href] css seçicisi kullanılır.
[attribute=değer]: bir attribute'un belli bir değere eşit olduğu html elemanlarını seçmek için kullanılır, örneğin a[href="https://reitix.com"] gibi
[attribute~=değer]: bir attribute'un içinde bir değerin geçmesi durumu için kullanılır, örneğin img[class~="resim"]
[attribute|=değer]: attribute'u değer ile başlayan html etiketlerini seçer
[attribute$=değer]: attribute'u değer ile biten html etiketlerini seçer
[attribute*=değer]: attribute'u değer ifadesini içeren html etiketlerini seçer
:active: aktif olan html elemanını seçer
::after: bir html elemanından sonra ekleme yapmak için kullanılır
::before: bir html elemanından önce ekleme yapmak için kullanılır
:checked: Form elemanları içinde seçili (checked) olan html etiketleri için kullanılır
:disabled: kullanıcının güncellememesi için disable edilmiş olan html etiketlerini seçer
:empty: altında başka html etiketi olmayan (çocuksuz) html etiketlerini seçer
:enabled: enabled özelliği aktif olan tüm html elemanlarını seçer
:first-child: bağlı olduğu üst html etiketleri arasından ilk etiketi seçer (ilk çocuk)
::first-letter: İlk harfi seçer
::first-line: İlk satırı seçer
:first-of-type: Kapsayıcısı olan html etiketi altındaki etiketlerden özellik olarak ilk kez tekrar eden etiketleri seçer
:focus: imleç üzerinde olan (focus edilmiş) html elemanlarını seçer
:hover: imleç üzerinde olan (hover edilmiş) html elemanlarını seçer
:in-range: Değeri belirli bir aralıkta olan html form elemanlarını seçer
:lang(dil): lang özelliği o dilde olan html elemanlarını seçer
:last-child: kapsayıcısının son elemanını seçer
:last-of-type: Kapsayıcısının o türden son elemanını seçer
:link: Ziyaret edilmemiş linkleri seçer
::marker: Liste elemanlarındaki işaretleyicileri seçer
:not(seçici): seçicinin tersi durumun sağlanması durumunda çalışmak (seçmek) için kullanılır
:nth-child(n): Kapsayıcısının kaçıncı çocuğu olduğuna göre seçim yapmak amacıyla kullanılır
:nth-last-child(n): Sondan başa kapsayıcısının kaçıncı çocuğu olduğuna göre seçim yapmak amacıyla kullanılır
:nth-last-of-type(n): Türe göre sondan başa kapsayıcısının kaçıncı elemanı olduğuna göre seçim yapmak amacıyla kullanılır
:nth-of-type(n): Türe göre kapsayıcısının kaçıncı elemanı olduğuna göre seçim yapmak amacıyla kullanılır
:only-child: Kapsayıcısının tek elemanı olan html etiketlerini seçmek için kullanılır
:optional: HTML formlarında gerekli (required) olarak işaretlenmemiş forn elemanlarını seçmek için kullanılır
::placeholder: placeholder ttribute'larını seçer
:read-only: read-only attribute'u aktif olan html elemanlarını seçer
:read-write: read-only attribute'u aktif olmayan html elemanlarını seçer
:required: HTML formlarında gerekli (required) olarak işaretlenmiş forn elemanlarını seçmek için kullanılır
:root: Dokümanın kök elemanını seçer
::selection: Kullanıcının seçimi olan etiket kısmını seçer
:visited: Daha önce ziyaret edilmiş linkleri seçer
Editör editi: sitede daha önce açılmış olan bazı diğer benzer başlıklar için;
bkz: HTML ve CSS ile Dikey Ortalama Yapmak
bkz: HTML ve CSS ile Dikey Ortalama Yapmak
bkz: inline css kodları JQuery ile silinebilir mi?
bkz: CSS ile bir input'a (textbox) nasıl yazılması engellenir?
bkz: SCSS ile Sass arasındaki fark nedir?
bkz: HTML'de CSS ile yazı seçimini iptal etmek