Seciciler
SeçicilerSınıf Seçicisi (Class Selector)
Aynı HTML elemanına farklı özellikler atamak için sınıf seçicisini kullanırız. Sınıf seçicisini HTML elemanımıza eklemek için başlangıcına class="" koymalıyız.. Tırnak içinede sınıf seçicimizin adı gelmeli.. (Türkçe karakter içermemeli, Sadece sayı olmamalı)
Sınıf seçicileri tanımlanırken adının başına nokta (.) işarti konulur. Örnek bir sınıf seçici örneği görelim;
<html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
.mavi {color: blue}
.kirmizi {color: red}
</style>
</head>
<body>
<p class="mavi">bu paragrafın rengi mavi olacak.</p>
<p class="kirmizi">bu paragrafın rengi kırmızı olacak.</p>
</body>
</html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
.mavi {color: blue}
.kirmizi {color: red}
</style>
</head>
<body>
<p class="mavi">bu paragrafın rengi mavi olacak.</p>
<p class="kirmizi">bu paragrafın rengi kırmızı olacak.</p>
</body>
</html>
Yukarıdaki örneğimizde p elemanımıza 2 farklı sınıf seçicisi atadık (kirmizi ve mavi adlarinda).. Daha sonra CSS dosyasında gerekli düzenlemeyi yaptık.. Yani aynı HTML elemanına farklı özellikler atamak için sınıf seçicimizi kullandık
Birde ek olarak .mavi ve .kirmizi diye belirttim CSS kısmında ancak yol izlenerek şu şekildede olur.. p.mavi ve p.kirmizi.. Bunada dikkat edilmesi gereken yerler olabilir.Birde önemli bir tanımlama yapacağımızı düşünün.. Ancak sadece bir HTML elemanına değilde istediğimiz sayıda HTML elemanına bunu kullanmak istersek aşağıdaki gibi yapmamız gerekir;
<html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
.mavi {color: blue}
</style>
</head>
<body>
<p class="mavi">bu paragrafın rengi mavi olacak.</p>
<h1 class="mavi">bu başlığın rengi mavi olacak.</p>
</body>
</html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
.mavi {color: blue}
</style>
</head>
<body>
<p class="mavi">bu paragrafın rengi mavi olacak.</p>
<h1 class="mavi">bu başlığın rengi mavi olacak.</p>
</body>
</html>
Yukarıdaki örneğimizde 2 farklı HTML elemanına (p ve h1) tek bir sınıf seçicisi atadık ve her ikisinede aynı özelliği tanımladık.. Yani hem paragrafımızın hemde başlık elemanımızın renkgi mavi oldu.
Çoklu Sınıflar
Birden fazla sınıfı bir HTML elemanına uygulamak için kullanırız.
Örneğin bir not birde onemli adında sınıfımız olsun.. onemli sınıf seçicisi kullanıldığında yazı rengi kırmızı olsun.. not sınıf seçicisi kullanıldığında yazı tipi kalınlaşsın ve her ikiside kullanıldığında arkaplan rengi sarı olsun..
<html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
.not {font-weight: bold}
.onemli {color: red}
.onemli.not {background-color: yellow}
</style>
</head>
<body>
<p class="not">Not:
<p class="onemli not">Burası onemli ve not seçicileri haiç onemli not'a vereceğimiz özelliği alacak yer..</p>
</body>
</html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
.not {font-weight: bold}
.onemli {color: red}
.onemli.not {background-color: yellow}
</style>
</head>
<body>
<p class="not">Not:
<p class="onemli not">Burası onemli ve not seçicileri haiç onemli not'a vereceğimiz özelliği alacak yer..</p>
</body>
</html>
Yukarıdaki örneğe göre aşağıdada sonuçu görelim;
Tekil Seçiciler (ID Selector)
Sınıf seçicisinden farklıdır. Sınıf seçicisi sayfada birden fazla elemana atanırken Tekil Seçicisi sadece bir tane elemana atanır. Tekil seçiciler tanımlanırken adının başına # (diyez) işareti konulur. Örnek bir kullanımını aşağıdaki örnekte inceleyelim;
<html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
#deneme {color: red}
</style>
</head>
<body>
<p id="deneme">bu bir paragraftır</p>
</body>
</html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
#deneme {color: red}
</style>
</head>
<body>
<p id="deneme">bu bir paragraftır</p>
</body>
</html>
Sadece bir tane elemana atır dememin sebebi şudur.. Yani normalde siz p elemanına istediğiniz kadar aynı tekil seçici ismini atayabilirsiniz.. Yani sınıf seçicisi mantığı ile kullanabilirsiniz.. Ancak doğrulamada (W3) kurallarına göre hatalı bir kodlama olacağı için asla geçemeyeceksiniz.. O yüzden gelin siz en doğru şekliyle tekil seçicileri kullanın.. Tekrarlanmayacaklar için tekil seçicisi kullanın..
Evrensel Seçiciler (Universal Selector)
Adı üstünde evrensel seçici yani tüm elemanları kapsayan bir seçicidir.. Uyguladığımız seçicimizdeki tüm elemanları etkiler.. Bakın seçicimizi değil seçicimizin içindeki elemanları diyorum buna dikkat edin.. Evrensel seçicinin işareti asteriks (*) işaretidir. Örnek kullanımını aşağıdaki örnekte inceleyelim;
<html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
* {color: red}
</style>
</head>
<body>
<h2>deneme</h2>
<p>deneme</p>
<em>deneme</em>
<strong>deneme</strong>
</body>
</html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
* {color: red}
</style>
</head>
<body>
<h2>deneme</h2>
<p>deneme</p>
<em>deneme</em>
<strong>deneme</strong>
</body>
</html>
Yukarıdaki örneğimizde evrensel seçici kullanarak html dosyamızdaki tüm elemanların rengini kırmızı yaptık.
Ayrıca bir eleman içindeki tüm elemanlara uygulamak istersek aşağıdaki örneği inceleyelim;
<html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
p * {color: red}
</style>
</head>
<body>
<p>bu bir paragrafır <strong>burası kalın</strong> ve <em>burasıda eğik</em> yazılması gerekiyor..</p>
</body>
</html>
<head>
<title>CSSDERSLERi.NET</title>
<style type="text/css">
p * {color: red}
</style>
</head>
<body>
<p>bu bir paragrafır <strong>burası kalın</strong> ve <em>burasıda eğik</em> yazılması gerekiyor..</p>
</body>
</html>
Yukarıdaki örneğimizde p elemanı içinde tüm elemanların yazı rengini kırmızı yaptık.. Bakın p elemanı içindeki yazı rengini değil.. p elemanı içindeki elemanların yazı rengini kırmızı yaptık.. Yani yukarıdaki örneğe göre strong ve emelemanları kırmızı renk oldu..