CSS Seçicileri

• Mehmet Kaplan
• 6 yıl önce
• 1300
• 3 Dakika

CSS Seçiciler, HTML ile oluşturduğumuz web sayfamızda yer alan elementleri bulup, stil verebilmek için kullandığımız CSS kodlarıdır.

Örnek verecek olursak;

h1{ /* Seçici */
 font-size: 14px;
}

Yukarıdaki kod ile başlığımızı CSS seçicisi ile seçtim ve boyutunu 14px yaptım.

CSS Seçici Çeşitleri

Aşağıda tanıtacağım seçiciler genelde en çok kullanılan ve bilinen seçicilerdir. Onlar haricinde Front-end geliştirme aşamasında ihtiyacınız olabilecek bir kaç adet seçiciyi daha tanıtacağım.

Tüm CSS seçicilerini içeren listeye şu adresten ulaşabilirsiniz.

---

Element Seçici

HTML elementlerimizin isimlerini kullanarak stil vermek için kullanırız. Örneğin; “h4”, “p”, “body”, “a” elementleri gibi.

/* h4 elementimizin font-size değerini 14px yaptık. */
h4{
 font-size: 14px; 
}

---

(.) Class (sınıf) Seçici

HTML elementlerin de kullanmakta olduğumuz class özelliği ile elementlere stil vermek için kullanırız. “.” ile başlarlar. Örneğin; “.element”

/* "class" değeri "baslik" olan elementimizin font-size değerini 14px yaptık. */
.baslik{
 font-size: 14px;
}

---

(#) ID Seçici

HTML elementlerin de kullandığımız ID özelliği ile elementlere stil vermek için kullanırız. “#” ile başlar. Örneğin; “#element”

/* "id" değeri "baslik" olan elementimizin font-size değerini 14px yaptık. */
.baslik{
 font-size: 14px;
}

(div p) Torun Seçici

---

Bir elementin içindeki başka elementleri seçmek için kullanırız.

/*
"div" elementi içinde bulunan tüm "p" elementlerinin font-size değerini 14px yaptık.
*/
div p{
 font-size: 14px;
}

---

(div > p) Çocuk Seçici

Bir elementin tam altında bulunan başka elementleri seçmek için kullanırız. Aynı Torun Seçini gibidir lakin bu seçici de sadece o elementin içindeki nesneler seçilir.

/*
Sadece, "div" elementinin tam altında bulunan "a" elementlerinin font-size değerini 14px yaptık.
*/
div > a{
 font-size: 14px;
}

---

(div + p) Bitişik Seçici

Bir elementten hemen sonra gelen ilk elementi seçmek için kullanırız.

/*
"div" elementinden hemen sonra gelen "p" elementinin font-size değerini 14px yaptık.
*/
div + p{
 font-size: 14px;
}

---

(div ~ p) Çoklu Bitişik Seçici

Aynı Bitişik Seçici gibi çalışmaktadır. Bitişik seçiciden tek farkı, belirtilen elementten sonra gelen ilk elementi değil, tüm elementleri seçer.

/*
 "div" elementinden sonra gelen tüm "p" elementlerinin font-size değerini 14px yaptık.
 */
 div ~ p{
  font-size: 14px;
 }

---

( [attribute] ) Nitelik Seçici

Bir elementin niteliği ile seçim yapabilmek için kullanırız.

/*
Örneğimizde, "name" niteliği olan tüm inputların font-size değerini 14px yaptık.
*/
input[name]{
 font-size: 14px; 
}

/* 
Diğer bir kullanımı;
Örneğimizde, "name" niteliği "eposta" olan input'un font-size değerini 14px yaptık.
*/
input[name="eposta"]{
 font-size: 14px;
}

---

Sözde (Pseudo) Sınıf Seçici

Bir elementin pseudo değerleri ile seçim yapabilmek için kullanırız. Örneğin; “:hover”, “:focus” vb.

/*
Örneğimizde, "a" elementinin üzerine gelince font-size değerinin 14px olmasını sağladık.
*/
a:hover{
 font-size: 14px; 
}

/* 
Örneğimizde, "a" elementine focus olunca font-size değerinin 14px olmasını sağladık.
*/
a:focus{ 
 font-size: 14px; 
}

CSS CSS Seçiciler