CSS'yi her kullandığımızda, seçici kullanıyoruz. Ancak buna rağmen, CSS seçiciler, belirtimin daha ihmal edilmiş kısımlarından biridir.
CSS3'teki büyük dönüşümlerden bahsediyoruz ama çoğu zaman temelleri unutuyoruz. Seçicilerin iyi kullanımı, günlük kodlarımızı daha basit ve daha şık kılar. Bugün, çoğu zaman aklımızı aktaran 10 seçiciyi ele alacağım, ama hem etkili hem de son derece faydalı.
* Seçici en kolay hatırladığınız kişi olabilir, ancak çoğu zaman kullanılmaz. Yaptıkları şey sayfadaki her şeydir ve bir sıfırlama oluşturmak için harikadır ve ayrıca yazı tipi ailesi ve sahip olmak istediğiniz boyut gibi bazı sayfa varsayılanları oluşturmak için idealdir.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Bu seçiciye bitişik bir seçici denir ve ne yaptığı, ilk elemanın hemen sonrasında bulunan öğeyi seçer. Başlığımızın ardından ilk div seçmek istediyseniz:
header + div {margin-top: 50px;}Bu seçmen, AB'nin herhangi bir seviyedeki çocuklarını seçecek AB'den farklı olarak sadece doğrudan çocukları seçecektir . Bu seçmen, bir ana öğenin birinci seviye çocukları ile çalıştığınız zaman önerilir. Örneğin, aşağıdaki gibi görünen sırasız bir listede birinci seviye liste öğelerini seçmek isterseniz:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Bu seçiciyi kullanacaksınız çünkü her zamanki AB seçicisi iç içe düzenlenmiş sırasız liste içindeki liste öğelerini de seçecektir.
ul > li {background: black;color: white;}Bu, belirli bir bağlantıyı farklı bir şekilde şekillendirmek istediğinizde gerçekten iyi bir seçenektir, tırnak içindeki her ne olursa olsun bağlantının hrefine eşleşecektir. Örneğin, kullanacağınız renk mavisiyle facebook'a tüm bağlantıları stillemek için:
a[href*="facebook"] {color: blue;}Tam bağlantılar için kullanabileceğiniz kesin url ile eşleşen * olmayan bir sürüm de vardır.
Bu seçici, özellikle, B'ye yerleştirdiğinizle eşleşmeyen herhangi bir öğe grubunu seçmenize izin veren, olumsuzlama maddesi nedeniyle özellikle yararlıysa, yalnızca ihtiyacınız olan altbilgi dışındaki tüm div'ları seçmek isterseniz:
div:not(.footer) {margin-bottom: 40px;}İlk çocuk ve son çocuk, ana öğenin ilk ve son çocuğunu seçmemize izin verir. Öğeleri listelemek ve kenar boşluğu veya kenarlıklarını kaldırmak söz konusu olduğunda bu çok yardımcı olabilir. İlk liste öğesindeki kenarlığı ve ihtiyacınız olan son liste öğesindeki kenar boşluğunu kaldırmak için:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Bir çocuk, bir elemanın herhangi bir çocuğunu kendi sırasına göre seçmeniz için basit bir yoldur. Örneğin, üçüncü liste öğesini sırasız bir listede istemiş olsaydınız, bunun yolu şöyle olurdu:
ul li:nth-child(3) {background: #ccc;}Bir n sayısının her çarpanını n değişkenini kullanarak seçmek için nth-child kullanabiliriz, örneğin 3n koyarsak liste öğesi numarası 3, 6, 9, 12 vb.
Sonuncu çocuk like-çocuk gibi çalışır, ancak sondan saymaya başladığı ilk liste öğesini saymak yerine, ikinci sayı ile kullanırsanız sonuncudan önce gelen liste öğesini seçer. kullanımı nth-çocuk seçici gibidir:
ul li:nth-last-child(2) {background: #ccc;}Bu seçici tam olarak düşündüğün şeyi yapar; Ne tür bir öğeye yerleştirdiğinizi görür ve örneğin sayfanızdaki yazdığınızla eşleşen üçüncü öğeyi seçer. Bir div içindeki üçüncü paragrafı seçmek için şunları kullanırsınız:
div p:nth-of-type(3) {font-style: italic;}Google'da bir şey ararken, daha önce gördüğünüz sayfaların farklı bir renkte göründüğünü fark ettiniz mi? Ziyaret edilen tam olarak budur. Bu kullanıcılar için harika bir eklentidir, ancak bazen unutulur ve deneyimlerime göre Google'da arama yaptığımda her zaman kullanışlı olur.
a:visited {color: blue;}Kodlamada bu tür seçicilerin kullanılması konusundaki tecrübelerim bize çok zaman kazandırabilir ve aynı zamanda birçok ID'nin işaretlememizi bozması ihtiyacını da ortadan kaldırır. Ve bu sadece CSS seçmenlerinin başlangıcı, gerçekten çok kullanışlı ama bazen unutulmuş çok daha fazla seçici var.
Stil sayfalarınızda CSS seçiciler kullanıyor musunuz? Kimliklere ve sınıflara geri dönmek daha mı kolay? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, kod resmi Shutterstock üzerinden.