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çicisiclass
özniteliği değerikı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ğiyorumGörderKap
(yaniid
özniteliği değeriyorumGö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 dans | *
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 ('
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.
CSS Seçicileri
Aşağıdaki dizelge güncel olmayabilir ve böylelikle bazı CSS seçicileri dizelgenin dışında kalmış olabilir.
.sınıf
.kırmızı
class="kırmızı"
olan tüm ögeleri seçer.1#kimlik
#tekil
id="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, öge
div, p
Tüm <div>
ve tüm <p>
ögelerini seçer.1öge öge
div p
Herhangi bir atası <div>
olan tüm <p>
ögelerini seçer.1öge > öge
div > p
Yalnızca ilk atası <div>
olan tüm <p>
etiketlerini seçer.2öge + öge
div + p
<div>
ögesinden sonra gelen tüm <p>
ögelerini seçer.2öge ~ öge
div ~ p
<div>
ögesinden önce gelen tüm <p>
etiketlerini seçer.3[öznitelik]
class
class
ö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:active
a:active
Etkin olan bağlantıları seçer.1::after
h1::after
<h1>
ögelerinden sonra içerik ekler.2::before
h1::before
<h1>
ögelerinden önce içerik ekler.2:checked
input:checked
Seçilmiş <input>
ögelerini seçer.3:disabled
input:disabled
disabled
<input>
ögelerini seçer.3:empty
div:empty
Bütünüyle boş olan <div>
ögelerini seçer.3:enabled
input:enabled
enabled <input>
ögelerini seçer.3:first-child
p:first-child
Atasının ilk çocuğu olan <p>
ögelerini seçer.2::first-letter
p::first-letter
<p>
etiketlerinin ilk harfini seçer.1::first-line
p-first-line
<p>
etiketlerinin ilk satırını seçer.1:first-of-type
span:first-of-type
Atasının ilk <span>
ögesi olan <span>
ögelerini seçer.3:focus
input:focus
Odaklanılmış <input>
ögelerini seçer.2:hover
a:hover
| div:hover
Fare ile üzerine gidilmiş <a>
| <div>
etiketlerini seçer.1:in-range
input:in-range
Değeri belirlenen araklıkta olan <input>
ögelerini seçer.3:invalid
input:invalid
Geçersiz değere iye <input>
ögelerini seçer.3:lang(dilKodu)
span:lang(en)
Dili İngilizce olan <span>
etiketlerini seçer.2:last-child
span:last-child
Atasının son çocuğu olan <p>
etiketlerini seçer.3:last-of-type
span:last-of-type
Atasının son <span>
ögesi olan <span>
ögelerini seçer.3:link
a:link
Ziyaret 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-type
span:only-of-type
Atasının tek <span>
ögesi olan <span>
ögelerini seçer.3:only-child
span:only-child
Atasının tek çocuğu olan <span>
etiketlerini seçer.3:optional
input:optional
required
özniteliği tanımlanmamış <input>
ögelerini seçer.3:out-of-range
input:out-of-range
Belirtilen sınırların dışına çıkmış <input>
ögelerini seçer.3:read-only
input:read-only
read-only
özniteliği tanımlanmış <input>
ögelerini seçer.3:read-write
input:read-write
read-only
özniteliği tanımlanmamış <input>
ögelerini seçer.3:required
input:required
required
özniteliği tanımlanmamış <input>
ögelerini seçer.3:root
BelgeBelgeyi seçer.3::selection
SeçimFare, klavye ve benzeri yardımıyla kullanıcının seçtiği belge parçasını seçer.?:valid
input:valid
Geçerli değere iye olan <input>
ögelerini seçer.3:visited
a:visited
Ziyaret edilmiş bağlantıları seçer.1