CSS Seçiciler

HTML üzerindeki stil vermek istediğimiz öğeyi seçmek için css seçicileri kullanırız.

İpucu : CSS ile istenilen HTML öğesi kolaylıkla seçilebilir ve stillendirilebilir. CSS seçiciler konusunda detaylı bilgi sahibi olmanız web tasarım kodlama icra ederken size çok büyük kolaylıklar sağlayacaktır.

CSS Seçici Türleri

• Basit Seçiciler : Basit seçiciler HTML öğelerini sınıf(classname), id ve etiket isimleri ile seçmemizi sağlamaktadır.
• Birleştirici Seçiciler : Seçmek istediğimiz HTML öğesinin yanındaki ya da altındaki komşu elemanı ve ilişkide olduğu diğer elemanları seçebilmek için kullanılır.
• Pseudo Class Seçiciler : :hover, :focus gibi belirli durumlara göre HTML öğelerini seçmemize yarar.
• Pseudo Element Seçiciler : Bir elemanın belirli bir bölümünü seçerek stillendirmek için kullanılır. ::pseudo-element şeklinde seçilir. Örnek; h1::after, h1::before vb.
• Atrribute (Nitelik) Seçiciler : HTML öğesini özniteliğine göre ya da nitelik değerine göre seçmemizi sağlar.

Temel (Element) CSS Seçiciler

Öğe adı ile bir HTML öğesini seçmenizi sağlar.

Örnek olarak bir HTML sayfasındaki tüm h2 ve p başlıklarını seçmek istiyorsak seçici olarak onları belirlememiz gerekir.

h1{
font-size:30px;
color:blue;
margin-bottom:20px;
}
p{
font-size:16px;
color:#e2e2e2;
}
                            

Class (Sınıf) CSS Seçiciler

Bir HTML öğesini classname'ine göre yani sınıf adına göre seçmemizi sağlar.

<div class="main"> main classname'ine sahip bir div elemanımız var ise onu seçmek için div.main{width:50%;} şeklinde belirtebilirsiniz.

class özelliği her HTML öğesinde kullanılabilir ve aynı classname'e sahip birden çok eleman belirleyebilirsiniz.

/* title classname içeren tüm 'h1' elemanlarını seçer. */
h1.title{
font-size:30px;
color:blue;
margin-bottom:20px;
}
/* description classname içeren tüm 'p' elemanlarını seçer.*/
p.description{
font-size:16px;
color:#e2e2e2;
}
/* description classname içeren tüm elemanlarını seçer. */
.description{
font-size:16px;
color:#e2e2e2;
 }
                                

id (Kimlik) CSS Seçiciler

id="myID" şeklinde her HTML öğesine id="" tanımlayabilirsiniz. Id bilgileri eşsiz ve 1 sayfada en fazla 1 adet kullanılabilir. Aynı sayfada aynı id="" değerine sahip başka bir HTML öğesinin bulunması yanlış kullanım olacaktır.

CSS ile id seçici kullanmak için #idName şeklinde yazılmalıdır.

/* title id'sine sahip  'h1' elemanını seçer. */
h1#title{
font-size:30px;
color:blue;
margin-bottom:20px;
}
/* description id name içeren 'p' elemanını seçer.*/
p#description{
font-size:16px;
color:#e2e2e2;
}
/* description id name içerien elemanı seçer. */
#description{
font-size:16px;
color:#e2e2e2;
 }
                                

Evrensel CSS Seçici

Evrensel css seçicisi olarak * işareti kullanılmaktadır. *{} şeklinde kullandığınızda HTML sayfasındaki tüm elemanları seçmiş olursunuz.

Aynı şekilde bir elamanın içerisindeki tüm öğeleri de seçmek için kullanabilirsiniz. div.main * şeklinde yazıldığında main classname'e sahip div içerisindeki 'div class="main"' hariç tüm öğeleri seçmiş olursunuz.

/* Tüm HTML öğelerine aynı stili atar. */
*{
font-size:16px;
margin:0;
padding:0;
}
        

Grup Olarak Seçmek

Aynı stillere sahip HTML öğelerini aralarında "," kullanarak aynı anda stillendirmenizi sağlar.

h1, h2, h3{
color:#222;
margin-bottom:20px;
padding:10px;
line-height:1.4;
}