CSS Selectors

CSS Selectors (CSS Seçiciler)

CSS seçiciler veya diğer bir ifade ile selektörler (selectors) belirli özelliklere sahip olan XML ve HTML elementlerini hedefleyen bildiri tipleridir. Seçiciler ilişkili oldukları elementleri bulur ve belirtilen nitelikleri bu elementlere aktarırlar¹. Bu sayede XML ve/veya HTML elementlerinin sahip oldukları ön tanımlı özelliklere stil müdahalelerinde bulunulabilmektedir. Örneğin, en basit haliyle izah etmek gerekirse, bir metni bold (kalın) hale getirmek amacıyla kullandığımız strong etiketi ile işaretlenmiş metinlerin aynı zamanda kırmızı olmasını stil özelliklerine müdahale ederek sağlayabiliriz².

strong { color: red; }

1996 yılında W3C önerisi ile CSS1 (Cascading Style Sheets, Level 1) HTML etiketleri için basit bir görsel biçimlendirme modeli olarak duyuruldu. Class as selector, ID as selector ve Contextual selectors başlıkları altında kullanıma sunulan seçiciler ile tanımlarına uyan elementler bulunur ve barındırdıkları nitelikler üzerinden etiketler yeniden düzenlenir³. 1998 yılında duyurulan ve CSS1 temel alınarak geliştirilen CSS2.1 (Cascading Style Sheets Level 2 Revision 1) ile seçiciler çok daha kapsamlı hale gelmekte. Örneğin, pattern (şablon) tanımları kapsamında type, class ve id seçicilere ek olarak universal, child, adjacent, attribute kullanımları da bu sürüm itibariyle değerlendirilebilmektedir. 2001 yılında duyurulan CSS3 ile CSS2.1’e ek olarak attribute, regular expression, elements contained, criteria, state gibi kullanımlar da seçiciler arasına dahil edilmiştir. Aşağıda CSS3 temel alınarak kullanılabilir hale gelen seçicileri mümkün olduğunca yalın bir şekilde açıklamaya ve örneklendirmeye çalıştım⁴ ² ⁵ ⁶ ⁷ ⁸ ⁹.

Temel Seçiciler (Basic Selectors)

tag (Type selector)

Tip seçici (type selector). Node olarak eşleşen tüm elementleri seçer. İlişkilendirildiği sayfadaki HTML elementlerini tipine (type) göre hedeflemek istediğimiz durumalarda kullanırız. Aşağıdaki örnekte a ve ul elementleri için stil tanımları yapılmıştır.

a { color: red; }
ul { margin-left: 0; }

.classname (Class selector)

Verilen sınıf özniteliğine (class attribute) sahip tüm elementleri seçer. Bir element birden fazla classname alabilir. Bu tür durumlarda son tanımlanan ve/veya !important ile vurgulanan nitelik(ler) uygulanır. Elementler için classname özelleştirmeleri yapılabilir.

.classname { color: red; }
span .classname { color: blue; }

idname (ID selector)

Id özelliğinin değerine göre bir element seçer. Görüntülenen sayfada benzersiz bir adet Id tanımı olmalıdır.

#idname { color: red; }
span #idname{ color: blue; }

* (Universal selector)

Tüm elementleri seçer. İsteğe bağlı olarak, belirli bir ad alanı (namespace) veya tüm ad alanları ile sınırlı olabilir.

* { color: red; }
* span { color: blue; }

[attr] (Attribute selector)

Özellik seçici (attribute selector) ile belirli bir özniteliğe (attribute) sahip tüm öğeleri seçebiliriz. Öznitelikler farklı biçimlerde tanımlanabilirler; [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

a[href$=".org"] { font-style: italic; }
* span { color: blue; }

Grup Seçiciler (Grouping selectors)

E, F (Grouping)

Bir gruplama yöntemidir ve eşleşen tüm elementlere benzer nitelikleri uygular. div, span kullanımında div ve span etiketlerine aynı nitelikler aktarılır.

div, span { color: red; }

Birleştiriciler (Combinators)

E F (Descendant combinator)

Yaygın seçicilerden biri de descendant (torun) seçicisidir. Elementleri daha spesifik şekilde seçebilmemizi sağlar. Örneğin, div span kullanımında seçici sadece div içerisindeki span elementiyle eşleşecektir.

div { color: red; }
span { color: blue; }
div span { color: green; }

A > B (Child combinator)

> birleştirici (combinator) ile belirtilen elementin kapsadığı alt elemanlar (child) seçilir. Aşağıdaki örnek tanım ol > li ile ul > li için farklı nitelikler sağlayacaklardır.

li { color: blue; }
ul > li { color: red; }

A ~ B (General sibling combinator)

~ birleştirici (combinator) kardeş (sibling) elementleri seçer. İkinci elementin ilkini (hemen olmasa da) takip ettiği ve her ikisinin de aynı ebeveynleri (parent) paylaştığı anlamına gelir. Elementlerin yanı sıra .classname ve #idname ile birlikte de kullanılabilir. İkinci elementin her tekrarı aynı nitelikleri taşıyacaktır. p ~ span kullanımında aynı parent içerisinde olmak şartıyla p elementinden sonraki her span hedeflenir.

span { color: blue; }
p { color: green; }
p ~ span { color: red; }
.featured-image ~ p { font-weight: bold; }

A + B (Adjacent sibling combinator)

+ combinator bitişik kardeşleri (sibling) seçer. Bu, ikinci elementin doğrudan ilk elementi izlediği ve her ikisinin de aynı üst elementi (parent) paylaştığı anlamına gelir. General sibling combinator kullanımından farklı olarak, adjacent sibling combinator sadece ilk elementi takip eden kardeş elementi hedef alır. li:first-of-type + li kullanımında bir listedeki ikinci madde blue ile renklendirilir.

h2 + p { color: red; }
li:first-of-type + li { color: blue; }

Pseudo

`:` Pseudo classes (Sözde sınıflar)

: (pseudo class) bize belge ağacında (document tree) bulunmayan durum (state) bilgilerine göre elementleri seçme imkanı sağlar. Yaygın olarak bağlantıların ayrıştırılması sürecinde kullanılır. Örneğin, a:visited ile a elementinin kullanıcı tarafından ziyaret edildiği durum nitelendirilmektedir.

a { color: red; }
a:visited { color: blue; }

`::` Pseudo elements (Sözde elementler)

:: (pseudo element) ile HTML’de bulunmayan varlıklar nitelendirilir. Örneğin, p::first-line ile bir paragrafın sadece ilk satırına nitelikler atayabiliriz.

p { color: red; }
p::first-line { color: blue; }

CSS3 ile birlikte kullanıma sunulan diğer sözde seçiciler ise şöyle:


:root	:nth-child()	:nth-last-child()
:nth-of-type()	:nth-last-of-type()	:last-child
:first-of-type	:last-of-type	:only-child
:only-of-type	:empty	:not
:target	:disabled	:enabled
:checked	:lang

Flexbox başta olmak üzere, Bulma CSS, Tailwind CSS ve Grav örnek tema hazırlık sürecinde de mümkün olduğu kadar yukarıda bahsi geçen seçicilere değinmeye gayret edeceğim. Bu yazılar yayınlandığında haberdar olmak için e-bülten kaydı oluşturabilirsiniz. Ek olarak, aşağıda yer alan İleri Okumalar ve Kaynakça bölümlerini de ayrıca incelemenizi öneririm.