Merhaba, CSS seçicilerine değineceğim yazıma hoşgeldin.
Önce seçicilerin ne olduğuna bakalım. Seçiciler, seçilenler, seçilebilenler...
CSS'de farklı stilleme yapmak için kullandığımız etiketleri ayırmamız gerekiyor bu ayrımı ise seçiciler yardımıyla yapabiliyoruz.
en popülerden az bilinene doğru sırasıyla anlatalım.
etiketler; "div, span, p, a, button, h serisi, table, ul, li" bu elemanlar ana yapı taşlarımız mihenk taşlarımız bunlar olmadan html de olmaz zaten, peki niye seçicilere bunları koydun. css'i yapan abilerimiz bunlarıda seçici olarak eklemiş bana kızmayın..
class reis'e gelelim. bu abimizi tüm etiketlere ekleyebilir içerisinde bir den fazla sınıf tanımı yapabiliriz.
Örn: <author class="ibrahim mesut yilmaz"></author>
örneğimde etiket olarak bilindikler yerine özellikle author yazdım. bunu şu andaki güncel browserlar sanki bir div varmış gibi görecektir ve bu etiketi/sınıfı patlatmayaacktır, yani çalışacaktır. Buna benzer olarak türkçe karakter bile kullanıp test edebilirsiniz, çalışacaktır ama hiç tavsiye etmiyorum. herkesin bilgisayarı sizinki gibi güncel sorunsuz olmayabilir. Herşey her browserda çalışacak diye birşey yok...
id tam bir patron. Bu abimiz ise her yerde bilindiği üzere tek kullanımlık tek atıştırmalıktır.
bir etikete sadece 1 tane id verebilirsiniz. Amacı üzere sadece 1 tane olmak için tasarlanmıştır.
Bu demek oluyorki;
Örn: <author id="ibrahim mesut yilmaz"></author>
ÅŸeklinde bir id verilemez. ve
Örn:
<author id="ibrahim">1</author>
<author id="ibrahim">2</author>
aynı id yi 2 farklı etikette de kullanamazsınız.
Nitelikler nedir nitelik dediğimiz. Örn: a[title] , input[type="checkbox"] vb. şeklinde kullanımlarla ayrıştırma yapabilir seçebiliriz. nitelik seçicilerini yukarıdaki author etiket örneğine binaen şu şekilde de yapabilirsiniz. Örn: author.ibrahim[class="ibrahim mesut yilmaz"]{...}
etiketinizdeki tüm nitelikleri kullanabilirsiniz.
Sözde Seçiciler ile ne yapıyoruz? Bir etiket sınıf id yani herhangi bir seçicinin yanına iki nokta koyup yapacağımız işlemleri durumlara göre ayrıştırabiliriz. hemen örneklere geçelim.
a:hover diyerek mouse ile üzerine geldiğimizde farklı durumlar elde edebiliriz
Örn:
a:hover
a:focus
a:selected a:visited
vb. örnekler mevcut. hepsini durumlara göre deneyimlemenizi tavsiye ederim.
p::first-line birde paragraflar için bir ayarımız var bunu kullanarakta ilk satıra özel stilleme yapabilirsiniz..
BirleÅŸtiriciler ile kendisinden sonraki elemanlara stilleme yapabiliriz..
Örn:
div.item + .item , p + p , ul li+li şeklinde stillemeyi ayarlayabilir, grup halinde birbirine bağlı olarak stilleme yapabilirsiniz.
.menu> ul>li bu şekilde ise üst elemanın içinde var ise gibi bir şarta bağlı olarak stilleme yapabilirsiniz. menü içinde ul içinde li var ise stil çalışacaktır.
input#hamburger~.header
input#hamburger~.main
input#hamburger~.footer
yukarıdaki örnekte ise hamburger id li bir input'tan sonra ve kardeş dizinde .header .main .footer gibi sınıflar var ise stilleme çalışacaktır.
Bonus olarak işinize yarabilecek örnekler...
a[href$=".jpg"]{...} Örneğimizde $ kullanarak dizenin sonunu hedefleyebiliriz. Bu durumda .jpg ile biten tüm linkleri bulmuş oluyoruz. Bunu .png .gif gibi çeşitlendirebiliriz.
a[href*="ibrahim"]{...} Örneğimizde * kullanarak yıldız tırnak içindeki değerin(ibrahim) elemanın yolunun içinde herhangi bir yerde olması yeterlidir.
örn: ibrahimmesutyilmaz.com mesutyilmazibrahim.com mesutibrahimyilmaz.com
aynı olayı sınıf içinde düşünebilirsiniz.
a[href^="http"]{...} Örneğimizde http ile başlayan bir href'e sahip tüm link etiketlerine stilleme yapıyoruz.
Bonuslarında sonuna geldik, bir sonraki yazımıda görüşmek üzere:)