CSS Seçicileri | Mehmet Kaplan

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.

CSS Seçicileri

CSS Seçicileri

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; 
}

Bu Reklam Alanı Esnektir.

  • Paylaş
  • 3
gravatar

mehmetkpln18

Architect, Graphic Designer and Website Developer

Mehmet Kaplan, yeni mezun bir mimar, web ve grafik tasarımcısı, araştırmacı. Tasarım, programlama ve kodlama konusunda tutkusu olan biri.

Yorumlar 3 Yorum yapıldı

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.