CSS Seçicileri

CSS Seçicileri - CSS Selectors

Markanız için 300X300 alan.

Kimlikler her sayfada tekil olarak kullanılırlar ve en hızlı çalışan CSS seçicileridir.

İlişkili CSS seçicilerinin çok yoğun biçimde birbirleriyle ilişkili biçimde kullanılmaları tarayıcının sayfayı sağlama süresini düşürür.

Öznitelik seçicileri; etiketlerin belirli özniteliklerinin bulunup bulunmadığına ya da bu özniteliklerin belirli değerleri taşıyıp taşımadıklarına bakan CSS seçicileridir.

Etiket adları da aynı zamanda bir CSS seçicisi olup root seçicisi de aynı html seçicisi gibi belgenin kendisini seçer ama html seçicisine göre daha özelleşmiştir (baskındır). Bkz: CSS'te Baskınlık ve Kalıtsallık

Çifte içerik oluşturmamak amacıyla CSS seçicilerinin yazım kurallarıyla ile ilgili bilgiler burada yeniden belirtilmedi. CSS seçicileriyle ilgili temel seviyede bilgi ve ipuçları için Bkz : CSS Seçiciler

Temel CSS Seçicileri

CSS Tür Seçici: Seçici adı uyuşan tüm ögeleri seçer.
Yazım : ögeAdı
Örnek : footer seçicisi belgedeki tüm <footer> etiketini seçer.
CSS Sürüm : 1
CSS Sınıf Seçici: CSS seçicisi, seçim işlemini class özniteliğine göre gerçekleştirir.
Yazım : .sınıfAdı
Örnek : class="kırmızı" CSS seçicisi class özniteliği değeri kırmızı olan tüm ögeleri seçer.
CSS Sürüm : 1
CSS Kimlik Seçici: CSS seçicisi, seçim işlemini id özniteliğine göre gerçekleştirir. Bir belgede yalnızca bir #kimlik bulunmalı.

En hızlı çalışan CSS seçicisidir !

Yazım : #kimlik
Örnek : id="yorumGönderKap" CSS seçicisi kimliği yorumGörderKap (yani id özniteliği değeri yorumGörderKap) olan tüm ögeleri seçer.
CSS Sürüm : 1
CSS Evrensel Seçici: Bu temel CSS seçicileri tüm ögeleri seçer. one-namespace ve all-namespace seçenekleri de var.
ns | * ve * | * daha çok tarayıcılar için eklenti geliştirenler tarafından kulanılır. Veb geliştiricileri * kullanırlar.
Yazım : * ya da ns | * ya da * | *
Örnek : * belgedeki tüm etiketleri seçer.
CSS Sürüm : 2 ve 3
CSS Öznitelik Seçici: Bu temel CSS seçicileri, etiketi özniteliğinin aldığı değere göre seçer.
Yazım : [öznitelik] | [öznitelik=değer] | [öznitelik~=değer] | [öznitelik|=değer] | [öznitelik^=değer] | [öznitelik$=değer] | [öznitelik*=değer]
Örnek : [autoplay] özniteliği (autoplay özniteliği herhangi bir değer tutan) tüm etiketleri seçer.
CSS Sürüm : 2 ve 3

CSS Seçicileri - İlişkilendiriciler

CSS Komşu Kardeş Seçici: Komşu kardeş ilişkilendiricisi (+) önceki ögeden hemen sonra gelen ögeyi seçer.
Yazım : A + B
Örnek : div + p bir <div> etiketinden hemen sonra gelen tüm <p> etiketini seçer.
CSS Sürüm : 2
CSS Genel Kardeş Seçici: Genel kardeş ilişkilendiricisi (~) eğer her iki ögede aynı atayı paylaşıyorsa, (önceki ögeden hemen sonra gelme zorunluluğu olmaksızın) önceki ögeden sonra gelen ögeleri seçer.
Yazım : A ~ B
Örnek : p ~ span seçicisi bir <p> etiketinden sonra gelen tüm <span> etiketini seçer.
CSS Sürüm : 3
CSS Çocuk Seçici: Çocuk ilişkilendiricisi (>) bir etiketin doğrudan alt soyunu (yani çocuklarını, torunlarını değil) seçer.
Yazım : A > B
Örnek : article > footer seçicisi <article> etiketinin çocuğu olan <footer> etiketini seçer.
CSS Sürüm : 2 ve 3
CSS Alt Soy Seçici: Alt soy ilişkilendiricisi (' ') (çocukların doğrudan alt soydan gelip gelmediğine bakmaksızın) çocukları (ve doğal olarak torunları) seçer.

En yavaş çalışan seçicidir !

Yazım : A B
Örnek : article section seçicisi bir <article> etiketinin doğrudan ya da dolaylı olarak kapsadığı tüm <section> etiketini seçer.
CSS Sürüm : 1 ve 4

CSS Yalancı-Ögeler

CSS Yalancı-Ögeler HTML'deki ağaç yapısında bulunmayan ögeleri seçerler. Örneğin bir HTML belgesinde ilk tamga (harf), ilk satır, ilk paragraf ve benzeri belirlenemez. Yalancı-ögelerin yardımıyla HTML dilinde bulunmayan bu tür (ilk satır ve benzeri) ögeler CSS özellikleri kullanılarak biçimlendirilebilir.

CSS Yalancı-Sınıflar

CSS Yalancı-Sınıflar belge ağacında bulunmayan ya da bulunması zor olan verilere iye etiketleri (daha önce ziyaret edilmiş bağlantılar, seçili <form> etiketi kutuları gibi) seçmeye yararlar.

Aşağıdaki dizelge güncel olmayabilir ve böylelikle bazı CSS seçicileri dizelgenin dışında kalmış olabilir.

CSS SeçiciÖrnekAçıklamaCSS Sürüm

.sınıf.kırmızıclass="kırmızı" olan tüm ögeleri seçer.1

#kimlik#tekilid="tekil" olan tüm ögeleri seçer.1

*Tüm ögeler.Tüm ögeleri seçer.2

öge<div>Tüm <div> ögelerini seçer.1

öge, ögediv, pTüm <div> ve tüm <p> ögelerini seçer.1

öge ögediv pHerhangi bir atası <div> olan tüm <p> ögelerini seçer.1

öge > ögediv > pYalnızca ilk atası <div> olan tüm <p> etiketlerini seçer.2

öge + ögediv + p<div> ögesinden sonra gelen tüm <p> ögelerini seçer.2

öge ~ ögediv ~ p<div> ögesinden önce gelen tüm <p> etiketlerini seçer.3

[öznitelik]classclass özniteliğine iye tüm ögeleri seçer.2

[öznitelik = Değer]class="kırmızı"class="kırmızı"'ya iye tüm etiketleri seçer.2

[öznitelik ~= Değer]class~="kırmızı"Birbiriyle boşluk yardımıyla ayrılmış birden fazla değere iye özniteliklerden, değerlerinden bir tanesi tam olarak kırmızı olan özniteliğe iye ögeleri seçer.

Özetle class="deneme kırmızı yap"'a iye olan ögeleri seçer.2

[öznitelik |= Değer]class|="kırmızı"Kısa çizgi (-) (tire) ile ayrılmış değerlerde, kısa çizgiden önceki bölümü kırmızı olan (kırmızı ile başlayan) ögeleri seçer. Bu, en-En'deki gibi, dil değerleriyle kullanmak üzere düşünüldü.2

[öznitelik ^= Değer]class^="kırmızı"class özniteliği kırmızı ile başlayan ögeleri seçer.3

[öznitelik $= Değer]a[src$=".mp3"]src özniteliğinin sonu .mp3 ile biten <a> ögelerini seçer.3

[öznitelik *= Değer]class*=kırmızıclass özniteliği kırmızı sözcüğünü içeren etiketleri seçer.3

:activea:activeEtkin olan bağlantıları seçer.1

::afterh1::after<h1> ögelerinden sonra içerik ekler.2

::beforeh1::before<h1> ögelerinden önce içerik ekler.2

:checkedinput:checkedSeçilmiş <input> ögelerini seçer.3

:disabledinput:disableddisabled <input> ögelerini seçer.3

:emptydiv:emptyBütünüyle boş olan <div> ögelerini seçer.3

:enabledinput:enabledenabled <input> ögelerini seçer.3

:first-childp:first-childAtasının ilk çocuğu olan <p> ögelerini seçer.2

::first-letterp::first-letter<p> etiketlerinin ilk harfini seçer.1

::first-linep-first-line<p> etiketlerinin ilk satırını seçer.1

:first-of-typespan:first-of-typeAtasının ilk <span> ögesi olan <span> ögelerini seçer.3

:focusinput:focusOdaklanılmış <input> ögelerini seçer.2

:hovera:hover | div:hoverFare ile üzerine gidilmiş <a> | <div> etiketlerini seçer.1

:in-rangeinput:in-rangeDeğeri belirlenen araklıkta olan <input> ögelerini seçer.3

:invalidinput:invalidGeçersiz değere iye <input> ögelerini seçer.3

:lang(dilKodu)span:lang(en)Dili İngilizce olan <span> etiketlerini seçer.2

:last-childspan:last-childAtasının son çocuğu olan <p> etiketlerini seçer.3

:last-of-typespan:last-of-typeAtasının son <span> ögesi olan <span> ögelerini seçer.3

:linka:linkZiyaret edilmemiş bağlantıları seçer.1

:not(seçici):not(span)<span> olmayan ögelerini seçer.3

:nth-child(n)span:nth-child(3)Atasının üçüncü çocuğu olan <span> etiketlerini seçer.3

:nth-last-child(n)span:nth-last-child(3)Atasının sondan üçüncü çocuğu olan <span> etiketlerini seçer.3

:nth-last-of-type(n)span:nth-last-of-type(3)Atasının sondan üçüncü <span> ögesi olan <span> ögelerini seçer.3

:nth-of-type(n)span:nth-of-type(3)Atasının üçüncü <span> ögesi olan <span> etiketlerini seçer.3

:only-of-typespan:only-of-typeAtasının tek <span> ögesi olan <span> ögelerini seçer.3

:only-childspan:only-childAtasının tek çocuğu olan <span> etiketlerini seçer.3

:optionalinput:optionalrequired özniteliği tanımlanmamış <input> ögelerini seçer.3

:out-of-rangeinput:out-of-rangeBelirtilen sınırların dışına çıkmış <input> ögelerini seçer.3

:read-onlyinput:read-onlyread-only özniteliği tanımlanmış <input> ögelerini seçer.3

:read-writeinput:read-writeread-only özniteliği tanımlanmamış <input> ögelerini seçer.3

:requiredinput:requiredrequired özniteliği tanımlanmamış <input> ögelerini seçer.3

:rootBelgeBelgeyi seçer.3

::selectionSeçimFare, klavye ve benzeri yardımıyla kullanıcının seçtiği belge parçasını seçer.?

:targetKancaKanca ile bağlantı kurulan sayfalarda "Çapa"'yı seçer.3

:validinput:validGeçerli değere iye olan <input> ögelerini seçer.3

:visiteda:visitedZiyaret edilmiş bağlantıları seçer.1