CSS Dersleri 6 - CSS Seçiciler ile Çalışmak
Bu dersimiz ile temel anlamda seçicileri anlattık. Seçicileri videolar izleyerek uygulamalı şekilde öğrenirseniz yazılar size yabancı gelmeyecektir.

CSS seçicilerini kullanarak, istediğimiz HTML işaretleme yapısına nitelikler ekleyin
CSS seçicileri, HTML etiketlerine erişmemize ve biçimlendirme atamaları yapmamıza izin verir. HTML etiketindeki style niteliğini, yani inline kullanabiliriz, CSS işlemlerini kullanmak için <head> arasında <style> etiketini kullanabiliriz, yani dahili olarak kullanabiliriz veya .css dosya uzantısına sahip bir dosya oluşturup <head>'r ekleyebiliriz.
Seçiciler
Genel seçici (*)
Bu seçiciyi kullanarak tüm etiketlerimize CSS kodlarımızı uygulayabiliriz.
*{
margin:0;
padding:0;
}
div *{
color:orange;
}
İlk kullanımda tüm elementlerin margin ve padding değerlerini sıfıra çekmiş olduk ve ikinci kullanım ile ise tüm elementleri turuncu yazı rengine çevirdik.
Element seçicileri
Direkt olarak HTML etiketlerinin isimlerini yazarak kullandığımız seçiciler.
div{
background-color: orange;
}
Sınıf ve ID seçicileri
Bu seçiciler ile atadığımız class ve id değerlerine etki edebiliriz.
.turuncu{
background-color: #FFA500;
}
p.mavi{
color:blue;
}
<p class="turuncu">Arka plan rengim turuncu</p>
<div class="turuncu">Arka plan rengim turuncu</div>
#mavi{
background-color: #0000FF;
}
#lila{
color: #c8a2c8;
}
<p id="mavi">Arka plan rengim turuncu</p>
<div id="lila">yazı rengim lila</div>
Class için (.) ID için ise (#) kullanıyoruz.
Nitelik seçicileri
Bu seçicileri kullanarak, özelliklerini belirlediğimiz elemanlara CSS uygulayabiliriz. Öznitelik boş olsa bile öğeler etkilenir. Bir özniteliğe erişmek için tek yapmanız gereken özniteliğin adını köşeli parantez içinde [attribute] olarak yazmaktır.
[name]{
color: orange;
}
<button name="">gönder</button>
<ul>
<li name="html">HTML</li>
<li name="css">CSS</li>
</ul>
div[title="deneme"] {
background-color: orange;
}
<div title="Deneme">Lorem, ipsum dolor.</div>
<div title="deneme">Lorem, ipsum dolor.</div>
<div name="denemefalan">Lorem, ipsum.</div>
div[title~="isim"] {
color: orange;
}
<div title="isim">Lorem, ipsum dolor.</div>
<div title="isimler">Lorem, ipsum dolor.</div>
<div title="isim ve şehirler">Lorem, ipsum dolor.</div>
a[href ^= "https"] {
color: palegreen;
}
<a href="https://www.google.com/">google</a>
<a href="https://github.com/">github</a>
<a href="http://github.com/">github</a>
Grup seçicileri
Etiketlere verilen CSS nitelikleri birbirine yakın veya ortak olabilir. Bu gibi durumlarda seçicileri gruplayabiliriz.
h1,h2,h3{
color:orange;
}
p.turuncu{
color:orange;
}
<p class="turuncu">turuncu yazı</p>
<p>normal yazı</p>
Çocuk seçiciler
Şimdi, birbirimizin hiyerarşik durumuna göre etiketler seçerek CSS özelliklerini belirleyeceğiz. Bir alt seçici, kendisiyle ve sarma üst etiketiyle bir ilişkiyi belirtir ve bir > sembolü ile temsil edilir.
p > span{
color:orange;
}
p > span >b{
color:blue;
}
div > ul >li#first{
color:red;
}
<p>
<span>child element</span>
</p>
Descentad seçiciler
Yani ebeveyn olan elementin altındaki tüm etiketlere ulaşmak için tercih edilir.
div p{
background-color:blue;
}
Genel Kardeş seçiciler
Aynı ebeveyn etikete sahip ve ard arda gelen etiketler için kullanılır.
ul ~ p{
color:orange;
}
<div>
<p>Lorem, ipsum.</p>
<ul>
<li>
<p>Lorem, ipsum dolor.</p>
</li>
</ul>
<h3>Lorem, ipsum dolor.</h3>
<p>Bu p etiketi turuncu renkte</p>
</div>
Pseudo Sınıf seçiciler
Sahte sınıfları kullanarak CSS'yi HTML etiketlerine uygulayabiliriz. Amacı seçicidir: pseudo class {}.
: link
Tarayıcıda daha önce açılmamış bağlantılara CSS uygular. Not: Efekti görmek için tarayıcınızın geçmişini temizlemeniz gerekebilir.
a#google:link {
color: red;
}
<a id="google" href="https://www.google.com/">Google</a>
:hover
İşaretlenen etiketin üzerine mouse ile geldiğimizde CSS uygular.
a.test:hover {
color: red;
}
<a class="test" href="https://www.github.com/">Github</a>
:active
Mouse ile tıklandığı vakit CSS uygulanır.
a:active {
position: relative;
top: 5px;
}
<a href="#">Submit</a>
:first-child
İlk çocuk etikete uygulanır.
ul > li:first-child {
color: orange;
}
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
:last-child
Son çocuk etikete uygulanır.
::first-letter
Blok halde bir etiketteki ilk harfe uygulanır.
p::first-letter {
font-size: 20px;
color: orange;
}
<p>Lorem ipsum dolor sit.</p>