Bu makale, web sitelerinde kullanılan CSS seçicilerinin önemini ve gelişmiş seçicilerin kullanım alanlarını anlatmaktadır Evrensel seçiciler, tüm belge öğelerini seçmek için kullanılırken, çocuk seçicileri belirli bir HTML elementinin direk çocuklarını seçmek için kullanılır İlk çocuk ve son çocuk seçicileri, belirli bir ebeveyn elementinin ilk veya son alt öğelerini seçmek için kullanılır Kalıtımsal seçiciler ise belirlenmiş bir elementin altındaki öğeleri seçmek için kullanılır Bu gelişmiş seçiciler, web sitelerinin tasarım ve düzenlemesini kolaylaştırarak CSS kodlarının daha verimli olmasını sağlar
CSS, web sitelerinin görsel ve stil unsurlarını belirlemekte kullanılan önemli bir araçtır. Gelişmiş CSS seçicileri, CSS kodlarını daha etkili hale getirerek kodlama sürecini daha da kolaylaştırmaktadır. Bu makalede, gelişmiş CSS seçicilerinin neler olduğunu ve kullanım alanlarını öğreneceksiniz.
CSS seçicileri, HTML'de belirlenmiş elementleri belirlemek için kullanılır. Gelişmiş CSS seçicileri ise bu elementleri daha spesifik bir şekilde belirlemenizi sağlar. Bu sayede, sitenizdeki öğelerin daha az kodla kontrol edilmesi, kodlamayı daha hızlı ve daha verimli hale getirir.
Bu makalede ele alınacak seçiciler arasında evrensel seçiciler, çocuk seçicileri, pseudo-seçiciler ve varlık seçicileri gibi gelişmiş seçiciler yer alır. Kullanım alanlarının yanı sıra her bir seçici hakkında bilgi sahibi olacaksınız.
Evrensel Seçiciler
Evrensel seçiciler, CSS seçicilerinin en basit ve en temel seçicilerindendir. Bir belgede bulunan tüm öğeleri seçmek için kullanılırlar. Bu seçici, belgedeki herhangi bir öğeye uygulandığında, o öğeye stil özelliklerini belirtmenizi sağlar.
Bir CSS belgesinde, "*" karakteri evrensel seçici görevi görür. Örneğin, aşağıdaki örnek tüm öğelerin font büyüklüğünün 16 piksel olmasını sağlar:
* { font-size: 16px;}Bu seçici, tüm belgeyle ilgili genel bir stil belirlemeniz gerektiğinde çok kullanışlıdır. Ancak, sayfanızdaki belirli bir öğeyi hedeflemek istediğinizde kullanımı genellikle önerilmez. Bu nedenle, daha spesifik seçicilerin kullanımı, sayfanızdaki öğeleri daha net bir şekilde belirlemenize ve kontrol etmenize yardımcı olabilir.
Çocuk Seçicileri
Çocuk seçicileri, belirli bir HTML elementinin direk çocuklarını seçmek için kullanılır. Bu seçiciler, genellikle ebeveyn elementin içindeki tüm çocuk elementleri seçmek yerine doğrudan belirli bir çocuk elementi seçmek için kullanılır. Bu seçici, ebeveyn elementindeki ilk sıradaki belirli bir çocuk elementini seçmek için özellikle faydalıdır.
Bu seçiciler, belirli bir ebeveyn elementin altında direk olarak bulunan çocuk elementlerini seçmek için kullanılır. Ayrıca, seçicilerin birleşimi kullanılarak belirli bir ebeveyn elementin altındaki belirli bir çocuk elementi seçilebilir. Örneğin, ul elementinin altındaki ilk li elementini seçmek için "ul > li:first-child" seçicisi kullanılır.
| Ebeveyn Element | Çocuk Elementi |
|---|---|
| <ul> | <li>Meyve</li> <li>Sebze</li> <li>Et</li> |
| <ol> | <li>Elma</li> <li>Armut</li> <li>Şeftali</li> |
Örneğin yukarıdaki tabloda, "ul > li:first-child" seçicisi kullanarak sadece Meyve elementi seçilebilir. Benzer şekilde, "ol > li:last-child" seçicisi kullanarak yalnızca Şeftali seçilebilir.
Bu seçiciler, bir web sayfasının düzenlemesi ve tasarımına yardımcı olmak için özellikle faydalıdır. Örneğin, bir menüdeki belirli öğelere farklı tasarımlar uygulamak için kullanılabilirler. Bunun yanı sıra, bir sayfanın içeriğindeki belirli bir bölümü seçmek için de kullanılabilirler.
İlk Çocuk ve Son Çocuk Seçicileri
İlk çocuk ve son çocuk seçicileri, bir ebeveyn elementinin belirli bir alt öğesine doğrudan erişim sağlar. İlk çocuk seçicisi, ebeveyn elementinin ilk alt öğesini seçerken, son çocuk seçicisi ebeveyn elementinin son alt öğesini seçer. Bu seçiciler, belirli bir alt öğenin stillerini veya özelliklerini değiştirmek için sıklıkla kullanılır.
Örneğin, bir web sitesinde, menüdeki ilk öğenin biraz daha büyük veya farklı bir renkte olmasını isteyebilirsiniz. İlk çocuk seçicisi, bu değişikliği yapmanıza olanak tanır. Aynı şekilde, son öğenin de farklı bir özellikle belirginleştirilmesi gerekiyorsa, son çocuk seçicisi kullanılabilir.
İlk çocuk ve son çocuk seçicileri, kalıtımsal seçiciler gibi davranırlar. Bu, alt öğelerin yalnızca bir üst elementin altında bulunduğunda seçilebilirler anlamına gelir. Ayrıca, seçiciler first-child ve last-child şeklinde kullanılırlar. Örneğin,
| <ul> | <li>ilk öğe</li> | <li>orta öğe</li> | <li>son öğe</li> |
| </ul> | ul > | li:first-child { color:red; } | li:last-child { font-weight:bold; } |
Bu örnekte, ilk öğe kırmızı renkle belirginleştirilirken, son öğe koyu yarı kalın bir yazı tipiyle belirginleştirilir.
Kalıtımsal Seçiciler
Kalıtımsal seçiciler, CSS'de en önemli seçicilerden biridir. Bir element içindeki alt öğelere uygulanabilen bu seçiciler, belirlenmiş bir elementin altındaki öğeleri seçmek için kullanılır. Kalıtımsal seçiciler, özellikle büyük web siteleri için çok kullanışlıdır. Sitelerin yapısı karmaşık olabilir ve öğeler çok sayıda alt öğeye sahip olabilir. Bu nedenle, ilgili alt öğeleri ayrı ayrı seçmek yerine, bir üst element seçicisi belirleyerek tüm alt öğeleri seçmek daha kolay ve hızlıdır.
Örneğin, bir web sitesindeki tüm tabloların arka plan rengini değiştirmek istiyorsunuz. Bunun için, belirlediğiniz üst element seçicisi kullanarak tüm tablo alt öğelerini seçebilir ve CSS kodunuzu daha kısa ve daha kolay yönetilebilir hale getirebilirsiniz. Kalıtımsal seçicileri kullanarak, aynı zamanda belirli bir sayfa için özelleştirilmiş öğeleri de seçebilirsiniz.
Kalıtımsal seçiciler, ayrıca yazdığınız CSS kodunun temizliğini ve okunabilirliğini artırır. CSS kodunu daha az tekrar ve daha düzenli bir şekilde yazmanızı sağlar. Bununla birlikte, kalıtımsal seçiciler kullanırken, seçimlerinizi çok belirli hale getirmelisiniz. Aksi halde, istenmeyen öğeleri de seçebilir ve CSS'inizi bozabilirsiniz.
Genel olarak, kalıtımsal seçiciler, büyük, karmaşık web sitelerinde özellikle faydalıdır. Ancak, doğru kullanılmaları çok önemlidir. Eğer seçimleriniz tam ve belirliyse, CSS kodunuzu daha temiz ve okunabilir hale getirerek, web sitenizin geliştirilmesi ve yönetimi sürecini daha kolay hale getireceksiniz.
Doğrudan Çocuk Seçicisi
Doğrudan çocuk seçicisi, CSS'de kullanılabilecek bir diğer ilginç seçicidir. Adından da anlaşılacağı gibi, bu seçici yalnızca bir ebeveyn elementinin doğrudan çocuklarını seçmek için kullanılır. Belirli bir alt elemanı seçmek istediğinizde bu seçiciyi kullanabilirsiniz, ancak alt-alt elemanları veya daha derin öğeleri seçmek mümkün değildir.
Bir örnek olarak, aşağıdaki HTML koduna bakalım:
| <div> | <p>Birinci paragraf</p> <ul> <li>İlk öge</li> <li>İkinci öge</li> </ul> <p>İkinci paragraf</p> | </div> |
Bu yapıda, "div" elementi içinde "p" ve "ul" elementlerinin doğrudan çocuklarıdır, ancak "ul" elementi içindeki "li" elementleri doğrudan çocuk değildir çünkü bir ara öğeleri vardır.
Doğrudan çocuk seçicisi, noktalı virgülü kullanarak yazılabilir. Örneğin, yukarıdaki örnekte "p" elementlerini seçmek isterseniz şöyle yazabilirsiniz:
- "div > p" - Bu seçici yalnızca "div" elementi içindeki "p" elementlerini seçecektir.
- "div > ul > li" - Bu seçici yalnızca "div" elementi içindeki "ul" elementinin doğrudan çocuğu olan "li" öğelerini seçecektir.
Doğrudan çocuk seçicisi, HTML yapılarında belirli bir alt öğeyi doğru bir şekilde hedeflediğinizde oldukça faydalı olabilir. Ancak, daha karmaşık bir yapıda, çocuk-seçici kombinasyonları veya başka seçiciler kullanmanız gerekebilir. Bu nedenle, hangi seçicilerin kullanılacağına karar vermeden önce belgenin yapısını tam olarak anladığınızdan emin olun.
Not Seçici
Not seçicisi, öğeler arasında farklılıklar yaratmak için kullanılan bir seçicidir. Bu seçici, bir özellik değerine sahip olmayan öğeleri seçmek için kullanılır. Örneğin, bir sayfada tek tek öğelerde boşluk bırakmak istediğimizi düşünelim. Ancak belirli bir özellik değerine sahip öğelerde boşluk bırakmak istemiyoruz. Bu durumda not seçicisini kullanarak, belirli bir özellik değerine sahip olmayan öğeler arasında boşluk bırakabiliriz.
Not seçicisi, bir öğenin diğer öğelerden farklı özelliklere sahip olmasını sağlayabilir. Örneğin, bir tıklama butonunun arka plan rengini kırmızı yapmak istiyoruz, ancak sayfadaki diğer butonların arka plan rengini etkilemek istemiyoruz. Bu durumda not seçicisini kullanarak, sadece tıklama butonuna özel olarak arka plan rengini kırmızı yapabiliriz.
| Özellik | Kullanım |
|---|---|
| :not() | Belirli bir özellik değerine sahip olmayan öğeleri seçmek için kullanılır. |
Not seçicisi özellikle birden fazla özellik değerine sahip öğelerde çok kullanışlıdır. Bu durumda, belirli bir özellik değerine sahip olmayan öğeleri seçmek için not seçicisini kullanabiliriz. Ayrıca, not seçicisi, diğer seçicilerle beraber kullanılarak öğelerin seçimleri daha hassas bir hale getirilebilir.
Not seçicisi ile bir öğeyi seçmek istediğiniz ancak diğer özellik değerleriyle örtüşen bir özellik değerine sahip olduğu için seçilemediğini düşündüğünüzde, not seçicisini kullanarak öğeyi seçebilirsiniz. Not seçicisi, özel seçici davranışlarını da destekler. Bu sayede sayfalarımızın tasarımları esnek ve dinamik olabilir.
Pseudo-Seçiciler
Pseudo-seçiciler, CSS seçicilerine belirli durumlarda davranış eklemek için kullanılır. :hover seçicisi, öğenin üzerine geldiğinde belirli bir stil uygulamak için kullanılır. Örneğin, bir butonun renk değiştirmesi veya altına çizgi eklenmesi. Benzer şekilde, :active seçicisi, bir öğeye tıklandığında belirli bir stil uygulanmasını sağlar. :focus seçicisi, bir öğeye odaklandığında belirgin hale getirmek için kullanılır.
Bunun yanı sıra, :first-child ve :last-child pseudo-seçicileri, bir öğenin ilk veya son çocuğunu belirlemek için kullanılır. Örneğin, bir menüdeki ilk veya son öğenin farklı bir renk ile belirgin hale getirilmesi gibi. :nth-child pseudo-seçicisi, belirli bir sıradaki öğeleri seçmek için kullanılır ve :nth-of-type pseudo-seçicisi, belirli bir öğe türündeki öğeleri seçmek için kullanılır.
Bir diğer kullanışlı pseudo-seçici, :not seçicisidir. Bu seçici, belirli bir öğenin diğerlerinden farklı bir özellik taşıması durumunda uygulanabilir. Örneğin, bir sayfadaki tüm bağlantıları seçmek istediğimizde ancak belirli bir sınıfa sahip olanları hariç tutmak istediğimizde kullanılabilir.
İlk ve Son Pseudo-Seçicileri
İlk ve son pseudo-seçicilerinin kullanım amacı, bir öğenin belirli bir durumda ilk veya son öğe olup olmadığını belirlemek için kullanılır. İlk çocuk pseudo-seçicisi, belirli bir ebeveyn elementinin ilk çocuğunu seçmek için kullanılır. Örneğin, p:first-child seçici, bir belgedeki tüm p öğelerinin yalnızca ilk çocuğunu seçer.
Benzer şekilde, son çocuk pseudo-seçicisi, belirli bir ebeveyn elementinin son çocuğunu seçmek için kullanılır. Örneğin, p:last-child seçici, belgedeki tüm p öğelerinin yalnızca son çocuğunu seçer.
Bu seçiciler, özellikle form elemanları veya diğer liste öğelerinde faydalıdır. Örneğin, li:last-child seçici, bir sıralı veya sırasız listeye son elemanı eklemek için kullanılabilir.
Ayrıca, bu seçicilerin yalnızca ebeveynin son çocuğunu veya ilk çocuğunu değil, aynı zamanda yalnızca bir öğenin ilk veya son elemanını da seçebildiğini unutmayın. Örneğin, div:first-of-type seçici, belgedeki ilk div öğesini seçecektir.
Ziyaret Edilmemiş ve Aktif Pseudo-Seçicileri
Ziyaret edilmemiş ve aktif pseudo-seçicileri, belirli bir durumda ziyaret edilmemiş veya tıklanmış olup olmadığını belirlemek için kullanılır. Bu seçiciler, web sayfalarındaki bağlantıları takip etmek için kullanılabilir. Ziyaret edilmemiş bağlantıları bulabilir ve onlara farklı bir stilde uygulama yapabilirsiniz.
Örneğin, aşağıdaki kod, ziyaret edilmemiş bağlantıların mavi ve altı çizili olduğu, ziyaret edilmiş bağlantıların ise yeşil ve altı çizili olduğu bir sayfa oluşturur:
a:link { color: blue; text-decoration: underline;}a:visited { color: green; text-decoration: underline;}Bu seçiciler ayrıca, bir form düğmesinin tıklanabilir olduğunu veya bir belge parçasının aktif olduğunu belirlemek için de kullanılabilir. Örneğin, bir form düğmesinin ardındaki metni renklendirmek veya bir belge parçasının arka planını değiştirmek için bu seçicileri kullanabilirsiniz. Örneğin:
input:active { background-color: yellow;}#active-section:active { background-color: pink;}Bu örnekler, ziyaret edilmemiş ve aktif pseudo-seçicilerinin çok yönlü ve kullanışlı olduğunu gösterir. Bu seçiciler sayesinde, web sitenize daha fazla etkileşim ekleyebilir ve ziyaretçilerinizin daha iyi bir deneyim yaşamalarını sağlayabilirsiniz.
Attribute Seçiciler
Attribute seçicileri belirli bir özniteliğe sahip olan öğeleri seçmek için kullanılır. Örneğin, bir belgedeki tüm çerçeveleri seçmek için frame özniteliği kullanılabilir ya da href özniteliği kullanılarak belirli bir URL'ye sahip tüm bağlantılar seçilebilir.
Attribute seçicileri genellikle bir eşitlik işareti ile kullanılır. Örneğin, p[lang="en"] seçicisi, p elementinin lang özelliği "en" olarak ayarlanmış tüm öğeleri seçer. Attribute seçicileri, değerler arasında belirli bir ilişki belirlenirse daha da düzeltilebilir. Örneğin, [class^="top"] seçicisi, sınıf özniteliği "top" ile başlayan tüm öğeleri seçer.
[attribute]: Belirli bir özniteliğe sahip olan tüm öğeleri seçer.[attribute=value]: Belirli bir öznitelik değeriyle eşleşen öğeleri seçer.[attribute^=value]: Belirli bir özniteliğin değerinin belirli bir değerle başlayan tüm öğeleri seçer.[attribute$=value]: Belirli bir özniteliğin değerinin belirli bir değerle biten tüm öğeleri seçer.[attribute*=value]: Belirli bir özniteliğin değerinin belirli bir alt dizeyi içeren tüm öğeleri seçer.
Bu seçiciler genellikle input, a, img gibi öğelerle birlikte kullanılır. Örneğin, input[type="text"], tüm metin giriş alanlarını seçerken, a[href^="https"], https ile başlayan tüm bağlantıları seçer.
Attribute seçicileri, özellikle büyük belgelerde belirli özniteliklere sahip öğeleri hızlı bir şekilde seçmek için kullanışlıdır. Bu seçiciler, belirli bir Öznitelik tipine sahip öğeleri seçmek ve önceden belirlenmiş anahtar sözcüklerle eşleştirmek için kullanılabilir.
Varlık Seçicileri
Varlık seçicileri, CSS'de önemli bir role sahip olan ve belirli bir veri türüne sahip öğeleri seçmek için kullanılan seçicilerdir. Bu seçiciler, bir elementin bir özniteliğinin belirli bir değere sahip olmasını kontrol etmek için kullanılır.
Bir varlık seçicisi, belirli bir özniteliği olan tüm öğeleri seçmenizi veya bir özniteliği belirli bir değerle seçmenizi sağlar. [attribute=value] formatında kullanılabilen bu seçiciler, örneğin bir belgenin tüm bağlantılarını seçmek için a[href] kullanılabilir.
Bu seçiciler, ziyaret edilen veya ziyaret edilmemiş bağlantıların renklerini değiştirmek gibi pratik uygulamalarda kullanılabilir. Örneğin, ziyaret edilen bağlantılar için farklı bir renk ayarlamak ve ziyaret edilmemiş bağlantıları standart olarak göstermek için a:visited ve a:link pseudo-seçicileri ile kombinasyon halinde kullanılabilir.
Ayrıca, varlık seçicileri, belirli bir resim uzantısı veya doküman tipi gibi belirli bir veri türüne sahip öğeleri seçmek için de kullanılabilir. Örneğin, tüm PNG uzantılı resimleri seçmek için img[src$=.png] kullanılabilir.
Şablon ve Dil Seçicileri
Şablon ve dil seçicileri, web geliştiricilerin özellikle çoklu dil desteği olan web siteleri oluştururken kullandıkları seçicilerdir. HTML dilinde, her öğe, öznitelikleri ile birlikte tanımlanabilir. Şablon seçicileri, belirli bir HTML öğesi içinde bir özniteliğe sahip herhangi bir öğeyi seçmek için kullanılan seçicilerdir.
Bir koşul cümlesi oluşturulduğunda ve şablon seçici belirtilerek, yalnızca belirli bir şablonun altındaki öğeler seçilir. Örneğin, belirli bir sınıfta bulunan öğelerin yalnızca belirli bir şablon altında seçilmesi için şablon seçicileri kullanılabilir.
Dil seçicileri ise, belirli bir sayfanın farklı dile sahip olan öğelerini seçmek için kullanılır. Dil seçicileri, HTML özelliklerinin bir parçası olarak kullanılır. Örneğin, İngilizce içeriğin bulunduğu bir sayfada dil seçicisi kullanılarak yalnızca Almanca içeriği seçmek mümkündür.
Dil seçicileri genellikle "lang" özniteliği ile belirlenir. Özellikle çoklu dil desteği olan sitelerde kullanılan dil seçicileri, farklı dil çevirilerinin yönetimi için oldukça yararlıdır. Özellikle, kullanıcıların farklı dillere sahip cihazlardan siteye girmesi durumunda, dil seçicileri aracılığıyla doğru çevirileri alabilirler.
Özetle, şablon ve dil seçicileri, web geliştiricilerin uluslararası bir platformda kullanıcılarla etkileşim kurmak için kullandıkları çok önemli seçicilerdir. Şablon seçicileri, belirli bir şablona ve dil seçicileri, belirli bir dile sahip öğeleri seçmek için kullanılmaktadır.