CSS (Cascading Style Sheets) Nedir?

Kısaca, HTML dili ile oluşturulmuş web sitesi iskeletine stil vererek zenginleştirmek için kullanılan bir web teknolojisidir.
HTML dili ile oluşturduğumuz web sayfamızda yer alan tablolar, formlar ve yazılar gibi elementleri özelleştirmek için CSS teknolojisini kullanırız. Web sayfasında gördüğünüz renkler, tipografi özellikleri, logo pozisyonları, butonların stilleri yani web sitesinde görülen neredeyse tüm elementlerin stilleri ve hatta sitede yer alan efektlerin bir çoğu CSS ile oluşturulmaktadır. Peki asıl konumuz olan bu seçiciler nedir ve nelerdir?

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

Örnek Kullanımları

Bonus: w3schools, CSS seçicilerini daha iyi anlamamız için şu adreste güzel bir uygulama yapmış. (benim yaptığım örnekten çok daha iyi, kesinlikle bakmanızı öneririm)