Skip to main content

Bilmeniz Gereken 16 CSS3 Seçicileri

Seçiçiler, CSS’nin en temel unsurlarından biridir. DOM üzerinde hangi elemana ya da elemanlara ilgili stilleme kurallarımızı uygulayacağımızı belirlememize yardımcı olurlar. W3C‘nin CSS seçiçileri (selectors) tanımı (tercümedir);

Seçiçi bir yapıyı temsil eder. Bu yapıya karşılık gelen döküman / belge ağacı üzerinde, HTML ya da XML parçaları / elemanları için unsurları belirleyen koşullar olarak (CSS kuralları gibi) kullanılabilinir.

Bu makalemde bilmeniz gereken 16 önemli, projelerinizde sık kullanmanız gereken CSS3 seçiçilerine değineceğim.

Yazıya devam etmeden önce, yazıyı daha iyi anlayabilmeniz için aklınızda bulundurmanız gereken önemli bir konu; seçiciler içerisinde kullanacağım eleman bir HTML elemanını temsil etmektedir.

eleman[foo*=”bar”]

Bu ifade, foo özelliğinin değeri içerisinde bar bulunduran bütün HTML elemanlarını seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

p elemanlarında, ID özelliğinin değeri içerisinde “deger” bulunduran elemanların yazı renklerini kırmızı yapmasını istedik ;

css3-seçicileri

 

eleman[foo$=”bar”]

Bu ifade, foo özelliğinin değeri bar ile biten bütün HTML elemanlarını seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

p elemanlarında, ID özelliğinin değeri “bitti” ile biten elemanların yazı renklerini kırmızı yapmasını istedik;

css3 seçicileri

 

eleman[foo^=”bar”]

Bu ifade, foo özelliğinin değeri bar ile başlayan bütün HTML elemanlarını seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

p elemanlarında, ID özelliğinin değeri “deger” ile başlayan elemanların yazı renklerini kırmızı yapmasını istedik;

css3 seçicileri

 

:root Seçici

Bu ifade, her zaman için en üst düzey elemanı seçer, yani <html> elemanını seçer. :root normal bir eleman seçiciden daha yüksek düzeyde bir seçicidir.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfamızın arka planının kırmızı olmasını istedik ancak :root seçicisi daha yüksek bir seçici olduğu için arka plan yeşil oldu;

css3 seçicileri

 

eleman:nth-child(n)

Bu ifade, eleman belirtilen elemanı içeren üst öğe elemanın içerisinde, belirtilen elemanın n. (n yerine bir rakam) tekrarını seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfa içerisinde bulunan 5. p elemanın renginin kırmızı olmasını istedik;

css3 seçicileriFarklı Bir Senaryo Deneyelim

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfa içerisinde bulunan 5. p elemanlarının renginin kırmızı olmasını istedik;

css3 seçicileri

eleman:nth-last-child(n)

Bu ifade, eleman belirtilen elemanı içeren üst öğe elemanın içerisinde, belirtilen elemanın sondan n. (n yerine bir rakam) tekrarını seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfa içerisinde bulunan sondan 5. p elemanın renginin kırmızı olmasını istedik;

css3 seçicileri

eleman:nth-of-type(n)

Bu ifade, belirtilen elemanın n. tekrarını (n yerine bir rakam gelecek) seçer

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfa içerisinde bulunan 5. p elemanın renginin kırmızı olmasını istedik;

css3 seçicileri

 

Bu örnek :nth-child(n) seçicisiyle aynı sonucu doğurmuş oldu.

eleman:nth-child(n) ve eleman:nth-of-type(n) Arasındaki Fark

Bu iki seçici arasında büyük bir fark var. Yazıyla anlatmak yerine kodlu örnekle farkı gösterelim;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfa içerisinde bulunan 5. p elemanın renginin kırmızı olmasını istedik;

css3 seçicileri

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfa içerisinde bulunan p elemanın üst öğesinin, altında bulunan 5. elemanın  renginin kırmızı olmasını istedik. Bu durumda 5. elemanı <p>Dördüncü paragraf</p> olduğu için bu elemanın yazı rengi kırmızı olmuş oldu;

css3 seçicileri

eleman:nth-last-of-type(n)

Bu ifade, belirtilen elemanın sondan n. tekrarını (n yerine bir rakam) seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sayfa içerisinde bulunan sondan 5. p elemanın renginin kırmızı olmasını istedik;

 

css3 seçicileri

eleman:first-child ve eleman:last-child

:first-child seçicisi belirtilen elemanın üst öğesinin altında bulunan ilk elemanı seçerken, :last-child seçicisi ise belirtilen elemanın üst öğresinin altında bulunan son elemanı seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

İlk P elemanının rengini yeşil, son p elemanın rengini kırmızı yapmasını istedik ;

css3 seçicileri

eleman:first-of-type ve eleman:last-of-type

Aradaki farkı tekrar anlatmayacağım. Üst öğesine ve belirtilen eleman türüne göre (type) seçimi yapar. Hemen örneklendirerek açıklayayım

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Üst öğesi içerisinde bulunan ilk p elemanının renginin yeşil ve son p elemanın renginin kırmızı olmasını istedik ;

css3 seçicileri

eleman:only-child ve eleman:only-of-type

:only-child üst öğesi içerisinde bulunan, belirtilen tek eleman olması halinde belirtilen kuralları uygularken :only-of-type üst öğesi içerisinde belirtilen elemanın tek eleman olması halinde yazılan kuralları uygular

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sadece <p>3. div ilk paragraf</p> rengi yeşil oldu;

 

css3 seçicileri

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sadece <p>3. div ilk paragraf</p> ve <p>4. div ilk paragraf</p> rengi yeşil oldu;

css3 seçicileri

eleman:empty

Bu ifade, içinde herhangi bir eleman bulundurmayan, içi boş olan elemanları seçer.

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

İçi boş olan div elemanını 50 pixel genişliğine ve 50 pixel yükseliğine getirip, içini / arka planını kırmızı yapmasını istedik;

css3 seçicileri

eleman:not(x)

Bu ifade, belirtilen eleman içerisinde, belirtilen x ifadesini içermeyen elemanları seçtirir

Örneğin;

Aşağıdaki kodları online olarak test etmek için tıklayın.

HTML

CSS

Sonuç

Sonuncu eleman hariç bütün p elemanlarının yazı rengini kırmızı yapmasını istedik;

css3 seçicileri

Netice

CSS3’ün sözde sınıfları (pseudo) gelişmiş DOM yapısı içerisinde normal, standard CSS yapısıyla seçemeyeceğiniz elemanları kolay ve hızlı bir şekilde seçip, kurallarınızı uygulamanızda yardımcı olur. Umarım bu makale ile en önemli, en çok kullanılan CSS3’ün sözde sınıflarını öğrenmenize yardımcı olabilmişimdir.

Unuttuğum, aklınızda olan herhangi, önemli, sık kullanılan bir sözde sınıf varsa lütfen yorumla belirtin.

Hepinize projelerinizde başarılar dilerim.

Ilgıt Yıldırım

Alanında 16 yıldan fazla tecrübesi olan bir freelance / serbest web yazılımcısıyım. Son 8 yıldır e-ticaret siteleri ağırlıklı çalışmalar yapmaktayım. Web yazılımı konusunda PHP, MySQL, HTML, CSS ana ilgi alanlarımdır.