CSS Temel Seçiciler || CSS Basic Selectors
CSS içerisinde en çok kullanılan seçim (erişim) yöntemidir. Kendi içerisinde 4 farklı başlıktan oluşmaktadır. Bunlar. Class seçiciler, ID seçiciler, Universel * seçici ve Element seçicilerdir.
1) CSS ile ".class" seçiciler:
CSS .class değeri ile bir elemente erişmek istediğimizde öncelikli olarak erişilmek istenilen HTML elementinin "class" değeri tespit edilmelidir. HTML "class" değerleri birden çok elemente verilebilmektedir. Bu nedenle "id" yapısı ile keskin bir farkı vardır.
<h1 class='title'>This is a my title</h1>
<h2 class='title'>This is a my title</h2>
Erişim sağlanmak istenen elementin "class" değeri tespit edildikten sonra
.title{
color: orange;
}Yukarıdaki şekilde elemente erişim sağlanabilmektedir.
2) CSS ile "#id" seçici:
CSS ID seçici, HTML elementi içerisinde "id" özelleiği bulunan elementleri seçmek için kullanılmaktadır. "id" kelimesinin açılımı Identifier (Tanımlayıcı) şeklindedir. Kullanım alanı class alanından farklı olarak tek bir elementi değiştirmek maksatlıdır. HTML içerisinde "id" değeri aynı olan birden çok element bulunmamalıdır!
<span id='output'>Output</span> <!-- ID değeri sadece bu elemente özeldir! -->#output{
width: 100px;
height: 100px;
}Yazım tarzı yukarıda görüldüğü gibidir.
3) Universal * seçici:
HTML <body></body> elementleri içerisinde bulunan bütün elementleri temsil eder. Bazen "body" içerisinde bulunan bütün elementlerin aynı değerlerini değiştirmek isteyebiliriz. Örneğin:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}Yukarıdaki örnekte, "body" içerisinde bulunabilecek olan (h1, h2, h3, p, span vb.) tüm elementlerin margin, padding, box-sizing, özellikleri ayarlanmaktadır.
4) Element seçiciler:
Element seçiciler, HTML elementlerinin doğrudan tanımlanma anahtar kelimesini kullanmaktadırlar.
<body>
<article>
<h1> Title </h1>
<p> Paragraf </p>
</article>
</body>body{
width: 100%;
height: 100vh;
}
h1{
font-size: 2rem;
}
p{
color: red;
}
Yukarıda gösterildiği gibi doğrudan elementin tanımlanma isim değerini kullanmaktadır.
CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.