CSS Selector Kullanımı

    CSS üzerinde class, id gibi elemanları göze hitap eden, okunabilir, kitlemize uygun bir stil oluşturma amacıyla kullanıyoruz. Classlar bunu sağlayabilmemiz için aracı oluyor. Uygulamak istediğimiz stili, uygulayacağımız bölgeye erişimi sağlıyorlar. Bu özelliğinden dolayı class,etiket seçici olarak adlandırılabilir.

    CSS'de onlarca seçici mevcuttur. Bunlardan en bilindik olanlar; class, id ve etiketlerdir. Mouseclick olayları için de fazla kullanılan hover, active ve focus seçicilerini de bu listeye dahil edebiliriz. Bu yazıda yukarıdakilerin dışında kalan seçicileri inceleyeceğiz.

• :first-child, :last-child:

    Birden fazla eleman varsa ve biz bunlardan sadece birincisine stil uygulamak istediğimizde kullanabiliriz.

See the Pen zEyJZR by mefistof3l3s (@kubilay) on CodePen.

 
    Aynı şekilde son elemana stil uygulamak için, :last-child seçicisini kullanabiliriz.

See the Pen KXbxva by mefistof3l3s (@kubilay) on CodePen.

• :nth-child() :

  Yukarıda ilk ve son elemanlara nasıl erişeceğimizi gördük. Bunlar dışında kalan seçicilermize :nth-child() uygulayarak erişmemiz mümkün.

See the Pen MEZqOv by mefistof3l3s (@kubilay) on CodePen.

    :nth-child() seçicisindeki paranteze dikkat edelim. Sayı ile birlikte farklı parametreler de alabilir. Odd(tek) ve Even(çift), matematiksel formül gibi değerleri girebiliriz.

• ardışık seçiciler (~):

  sadece birbiri ardına gelen elemanlara stil uygulamak durumunda kalabilirsiniz. a etiketinnin içindeki değeri vurgulamak için a etiketinden önce ve sonra gelen span etikeyle arasında bosluk değeri olmasını isteyebiliriz. Bunu uygulamak için:

See the Pen XeoPVE by mefistof3l3s (@kubilay) on CodePen.

• :not():

  Bir stil uygulamak istiyor, ancak bazı elemanların bundan etkilenmesini istemediğimiz durumlarda :not() seçicisini kullanabiliriz.

See the Pen WZLgzo by mefistof3l3s (@kubilay) on CodePen.

• *: (universal)

Asteriks(*) bütün seçicilere erişimi sağlayan ana seçicidir. Burada uyguladığınız değerleri stil sayfanızdaki bütün elemanlarda görebilirsiniz.

See the Pen rGoZvd by mefistof3l3s (@kubilay) on CodePen.

Seçiciler aynı zamanda Javascript için de erişim imkanı sağlar.