Css Seçiciler

Css'in temel konuları üzerinden emin adımlarla devam ediyoruz. Bugün ki konumuz basit ama önemli olan temel seçicileri tanıyacağız. Html etiketlerini hızlı ve kolayca seçebilmek ve renklendirebilmek için çeşitli seçiciler bulunmaktadır. Şimdilik temelde kullandığımız dört seçiciyi ve hangi durumlarda tercih edildiğini öğreneceğiz. Hadi başlayalım.

Element Seçici

Html etiketlerini (<p>, <h1>, <span>,...vs) doğrudan seçebildiğimiz, seçicilerdir. Seçtiğiniz etiket, Html dosyası içerisinde birden fazla ise tümünü seçer ve css tanımını tümüne uygular. Genelde bu yöntem sayfanızın temel stillerini belirtmekte veya "Css Reset Yöntemi" için kullanılmaktadır.

body{
    background-color: #EEEEEE;
}

ID Seçici

Html elementinde tanımlanan id özelliği sayesinde belli bir elementin seçimini sağlayan seçicidir. <div id="header"> şeklinde id özelliği tanımlanan etiketi seçerek, gerekli css tanımını gerçekleştirebilmekteyiz.

#header {
    background-color: rgba(100, 253, 86, 0.466);
    border: 2px solid rgb(251, 255, 0);
    padding: 10px;
}

ID seçicisinin özelliği oluşturacağınız Html sayfasında ID özelliğinin tek yani eşsiz olması gerekiyor. Örnek; header, footer, main, content ve sidebar gibi sayfanızda oluşturacağınız alanları (layout) ifade edebilir.

Css Seçici

Html elementinde tanımlanan class özelliği sayesinde birden fazla aynı elementin seçimini sağlayan seçicidir. <h1 class="yazi_baslik"> şeklinde class özelliği tanımlanan etiketleri seçerek, gerekli css tanımını gerçekleştirebilmekteyiz.

.yazi_baslik{
    font-size:16px;
    text-decoration: underline;

}

Class seçicisinin özelliği oluşturacağınız Html sayfasında tekrarlanan etiketlerin seçimini ve stil tanımlamasını gerçekleştiriyoruz. Örnek; tekrarlanan başlıklar, linkler, listeler, yazılar, resimler ve input etiketlerinde kullanabilmekteyiz.

Grup Seçici

Birbirinden farklı html, id ve class özelliğine sahip etiketlerin topluca seçilebildiği seçiciler. Bu seçicinin amacı aynı stili paylaşacak etiketlerin seçilebilmesini sağlamak. Önce ki seçicilerin özelliğine göre topluca veya tek tek etiket seçimi yapılabilinir.

h1 h2 h3 h4 h5 p .yazi_baslik {
    color: #EEEEEE;
}

Burada seçici olarak belirttiğimiz etiketlerin yazı renklerinin aynı olduğunu ifade etmiş olduk. Genelde bu yöntem ile tasarımın genel temasını hızlıca oluşturmak ve kolayca değiştirebilmek için tercih edilir.

Sıkça kullanacağımız temel seçicileri anlatmaya çalıştım. Günümüzde css seçicilerin sayısı bundan çok fazla, lakin css'i yeni öğrenecek bir kişinin hepsini öğrenip, sindirmesi zaman alacaktır. Bu nedenle diğer seçicileri "Gelişmiş Css Seçicileri" adlı yazımda inceliyor olacağız.