CSS Dersleri 3 - Seçiciler


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Seçiciler (Selectors) konusunu öğreneceğiz.

CSS'de Seçiciler çok önemli bir konudur ve dikkatle takip etmenizi öneririz. CSS seçiciler, stil vermek istediğiniz HTML etiketlerini "bulmak" veya başka bir değiş ile "seçmek" için kullanılır. CSS'de Seçici türlerini 5 gruba ayırabiliriz :

  • Basit Seçiciler (Simple Selectors) : id , class , etiketler.
  • Combinator Seçiciler  : elementler arasındaki ilişkiye göre.
  • Sözde Sınıf Seçiciler (Pseudo-class Selectors) : belirli bir duruma göre
  • Sözde Elemen Seçiciler (Pseudo-elements Selectors) : bir etiketin belirli bir bölümünü seçmek,
  • Öznitelik Seçiciler (Attribute Selectors) : etiketlerin parametrelerine göre.

Bu dersimizde seçiciler konusuna en temelden giriş yapacağız.

CSS Etikete Göre Seçme

CSS'de HTML etiketine göre seçici tanımlamak için, etiketin ismini kullanmamız yeterlidir.

p {
  text-align: center;
  color: blue;
}

Bu örnekte, tüm "p" etiketleri içerisindeki yazıların renkleri mavi ve ortalanmış olacaktır. 

CSS ID'ye Göre Seçme

CSS'de HTML etiketlerinin parametresi olan "id" ye göre seçici tanımlanaiblir.CSS ID seçici, belirli bir etiketi seçmek için bir HTML etiketinin id parametresini kullanır.

HTML derslerinden hatırlayacağınız gibi, bir etiketin kimliği bir sayfa içinde benzersizdir, bu nedenle ID seçici, benzersiz bir öğe seçmek için kullanılır!

Bknz : HTML Dersleri 12 – ID Kullanımı

Belirli bir ID parametresine sahip etiketi seçmek için,kare (#) işareti kullanılır ve ardından etiketin ID değeri yazılır.

#ders {
  text-align: center;
  color: blue;
}

Not : HTML'de ID değerleri numara ile başlayamaz.

CSS Class'a Göre Seçme

CSS'de HTML etiketlerinin parametresi olan "class"a göre seçici tanımlanaiblir.CSS Class seçici, belirli bir etiketi seçmek için bir HTML etiketinin class parametresini kullanır.

Bknz : HTML Dersleri 11 – Sınıflar (Classes)

Belirli bir sınıfa sahip etikterleri seçmek için, bir nokta (.) işareti ve ardından sınıf adını yazılır.

.ortala {
  text-align: center;
}

CSS ile seçtiğimiz sınıfın sadece belirli etiketlerde çalışmasını belirleyebiliriz.

p.ortala {
  text-align: center;
}

Örnekte görüldüğü üzere "ortala" sınıfı, sadece p etiketi olup class değeri  "ortalama" olanlarda çalışacaktır.

CSS Evrensel Seçici

CSS'de Evrensel seçici (*) sayfadaki tüm HTML etiketlerini seçer. Seçici ifadesi olarak yıldız (*) kullanılır. Evrensel denmesinin sebebide tüm etiketleri seçmesindendir.

* {
  text-align: center;
  color: red;
}

Örnekte HTML kodları içerisindeki tüm etiketlerin yazı rengi kırmızı ve ortalanmış olacaktır.

CSS Grup Seçici

CSS Grup Seçici, aynı stil tanımlarına sahip tüm HTML etiketlerini seçer. Birden fazla etikete aynı stili vermek için kullanılır ve etiketler arası virgül ile ayrılır.

h1, h2, p {
  text-align: center;
  color: blue;
}

Örnekte görüldüğü gibi, h1 , h2 ve p etiketlerini toplu seçerek stillerini tanımladık.

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla