CSS Seçicilerine Giriş
İçindekiler
CSS (Cascading Style Sheets), web sayfalarının görünümünü ve stilini belirlemek için kullanılan bir stil dilidir. CSS seçicileri, belirli HTML öğelerine stil uygulamak için kullanılan özelliklerdir. Bu yazıda, CSS seçicilerine genel bir giriş yapacak ve temel seçici türlerini tanıtacağız.
CSS seçicileri, HTML öğelerini seçmek ve hedeflemek için kullanılır. Bu sayede belirli öğelere belirli stiller, renkler, yazı tipleri vb. özellikler uygulanabilir. CSS seçicileri genellikle bir stil kuralına eklenir ve stil uygulanacak öğeleri belirtmek için kullanılır.
- ID Seçicileri: #
- Sınıf Seçicileri: .
- Öznitelik Seçicileri: []
Bu temel seçici türleri, CSS seçicilerinin yaygın kullanılan alt kategorileridir. ID seçicileri, HTML öğelerini benzersiz bir kimlik numarasına (ID) göre hedeflemek için kullanılır. Örneğin, <div id=”header”> gibi bir HTML öğesini hedeflemek için #header seçicisini kullanabilirsiniz.
Sınıf seçicileri, HTML öğelerini belirli bir sınıfa göre hedeflemek için kullanılır. Örneğin, <p class=”note”> gibi bir HTML öğesini hedeflemek için .note seçicisini kullanabilirsiniz. Bir HTML öğesine birden fazla sınıf atanabilir ve aynı özelliklere sahip farklı öğeleri gruplamak için sınıf seçicileri kullanılabilir.
Öznitelik seçicileri, HTML öğelerini özelliklerine veya değerlerine göre hedeflemek için kullanılır. Örneğin, <a href=”https://www.example.com”> gibi bir HTML öğesini hedeflemek için [href] veya [href=”https://www.example.com”] seçicisini kullanabilirsiniz.
| Seçici Tipi | Kullanım Örneği | Açıklama |
|---|---|---|
| ID Seçicileri | #header | Belirli bir öğeyi ID’sine göre hedefler. |
| Sınıf Seçicileri | .note | Belirli bir öğeyi sınıfına göre hedefler. |
| Öznitelik Seçicileri | [href] | Belirli bir öğeyi öznitelik veya değerine göre hedefler. |
Yukarıdaki örnekler, CSS seçici türlerini temel olarak göstermektedir. CSS seçicileri, daha karmaşık seçicilerle birleştirilerek veya diğer seçici türleriyle bir araya getirilerek daha spesifik hedeflemeler yapılabilir.
ID Seçicileri: #
- ID seçicileri, CSS’de öğeleri tanımlamak için kullanılan güçlü bir araçtır.
- Bir öğeye ID seçici eklemek için, öğenin etiketinin yanına # sembolü takip edilerek bir ID değeri verilir. Örneğin, <p id=”my-paragraph”>Bu bir paragraftır</p>.
ID seçicileri yalnızca belirli bir öğeyi seçmek için kullanılır ve bu öğeye yalnızca bir kez uygulanabilir. Yani, aynı sayfada birden fazla öğe için aynı ID değeri kullanılmaması gerekir.
ID seçicileri, diğer seçici türlerinden daha spesifik ve güçlüdür. Bir öğeye ID seçici uygulandığında, bu öğe diğerlerinden daha öncelikli olarak taranır ve stil kurallarını daha yüksek öncelikle uygular.
| Syntax | Açıklama |
|---|---|
| #my-id | Öğeyi ID değerine göre seçer. |
Sınıf Seçicileri: .
Türkçe HTML Blog Yazısı – Sınıf Seçicileri: .
Sınıf seçicileri, CSS’in en temel yapı taşlarından biridir. Sınıf seçicileri, belirli bir sınıfa ait olan HTML elementlerini seçmek için kullanılır. Bu sayede, belirli stil ve özellikleri olan elementleri kolayca seçebilir ve manipüle edebiliriz. Sınıf seçicileri, CSS kodlarını daha düzenli ve anlaşılır yapmak için etkili bir araçtır.
Sınıf seçicilerini kullanırken, CSS kodumuzda nokta (.) işaretinden sonra sınıf adını belirtiriz. Örneğin, .tema1 sınıfı için “.tema1” olarak belirtebiliriz. Ardından, bu sınıfa ait olan HTML elementlerini stillemek için gerekli CSS özelliklerini belirleyebiliriz.
Sınıf seçicilerinin kullanımı önemlidir, çünkü birden fazla HTML elementine aynı sınıfı atayabiliriz. Bu da bize aynı stile sahip elementleri gruplayarak kolayca yönetme imkanı sunar. Örneğin, bir web sitesinde belirli bir arka plan rengini paylaşan tüm butonlara aynı sınıfı atayarak tek bir CSS stil tanımı ile hepsini etkileyebiliriz. Bu sayede kod tekrarından kaçınmış oluruz ve düzenli bir şekilde çalışabiliriz.
- Sınıf Seçicilerinin kullanımı
- Birden Fazla Sınıf Kullanımı
- Dahili ve Harici CSS Dosyalarında Sınıf Seçicileri
Sınıf seçicileri, nokta işareti (.) ile belirtilir ve CSS kodunun seçici kısmına eklenir. Sınıf adı ise nokta işaretinden sonra yazılır. Örneğin: .tema1 { color: red; } Bu kod, “tema1” sınıfına ait olan tüm elementlerin metin renginin kırmızı olmasını sağlar.
Bir HTML elementine birden fazla sınıf atayabiliriz. Bunun için sınıflar arasında boşluk bırakarak birden fazla sınıf adı yazmamız yeterlidir. Örneğin: <p class=”tema1 tema2″>Bu paragraf tema1 ve tema2 sınıflarına aittir.</p> Bu şekilde birden fazla sınıfa ait olacak elementleri gruplayabilir ve ortak bir stil tanımı yapabiliriz.
Sınıf seçicilerini hem dahili (<style></style>) CSS kısmında hem de harici CSS dosyalarında kullanabiliriz. Dahili CSS kullanırken, sınıf seçicilerini direkt olarak stil tanımlarına ekleyebiliriz. Harici CSS dosyası kullanırken ise sınıf seçicilerini elementlere <class> özelliğiyle ekleriz. Örneğin: .tema1 { color: red; } veya <p class=”tema1″>Bu paragrafın rengi kırmızı olacak.</p>
| Sınıf İsmi | Açıklama |
|---|---|
| .tema1 | Birinci tema sınıfı |
| .tema2 | İkinci tema sınıfı |
| .buton | Buton sınıfı |
Sınıf seçicileri, CSS’in temel yapı taşlarından biridir ve bir web geliştiricinin bilmesi gereken önemli kavramlardan biridir. Bu yazıda sınıf seçicilerinin kullanımını ve özelliklerini detaylı bir şekilde inceledik. Artık sınıf seçicilerini doğru bir şekilde kullanabilir ve HTML elementlerine istediğiniz özellikleri ekleyebilirsiniz.
Öznitelik Seçicileri: []
HTML ve CSS kullanarak web siteleri tasarlayabilir ve özelleştirebiliriz. Bunun için CSS kullanırken seçicileri doğru bir şekilde kullanmamız gerekmektedir. Öznitelik seçicileri, bir elementin özelliklerine göre seçim yapmamızı sağlar. Bu seçiciler, elementlere verilen özniteliklere dayanır ve bu özniteliklerin değerlerini kullanarak belirli elementleri hedeflememizi sağlar.
Örneğin, herhangi bir sayfada bulunan tüm “ elementlerini seçmek istediğimizde, öznitelik seçicilerini kullanabiliriz. Öznitelik seçicileri, belirli bir özniteliğe ve değere sahip elementleri seçmek için kullanılır. Örneğin, “ elementlerinin `href` özniteliği değerine göre seçim yapmak istediğimizde, aşağıdaki gibi bir CSS kodu kullanabiliriz:
| CSS Kodu | Açıklama |
|---|---|
| “`css | a[href=”https://www.example.com”] { color: blue; }“` |
Bu CSS kodu, `href` özelliği değeri “https://www.example.com” olan tüm “ elementlerini seçecek ve metin rengini mavi olarak belirleyecektir. Bu örnekte, öznitelik seçicileri kullanarak belirli bir değere sahip elementleri hedefledik ve bunlara stil uyguladık. Bu sayede, web sitesindeki belirli bağlantıları vurgulamak veya özelleştirmek için kullanabiliriz.
Pseudo-Element Seçicileri: ::
Pseudo-Element Seçicileri, CSS’te öğelerin belirli özniteliklerini hedeflemek için kullanılan bir seçici türüdür. Bu seçiciler, belirli bir öğenin bir kısmını stilize etmek veya içeriğe dinamik olarak eklemeler yapmak için kullanılabilir. Pseudo-element seçicileri, çift iki nokta üst üste (::) işaretiyle tanımlanır ve öğelerin belirli bir noktasını hedeflemek için kullanılır.
Bir pseudo-element seçicisi, öğenin belirli bir kısmını seçmek için kullanılır. Örneğin, ‘::first-line’ pseudo-element seçicisi, bir öğenin ilk satırını seçmek için kullanılır. Benzer şekilde, ‘::before’ ve ‘::after’ pseudo-element seçicileri, bir öğenin içine içerik eklemek veya stilini değiştirmek için kullanılır. Bu seçiciler, öğelerin içeriğine statik ya da dinamik olarak eklemeler yapmanın yanı sıra, tasarımı daha çekici hale getirmek ve kullanıcı deneyimini iyileştirmek için de kullanılabilir.
Pseudo-element seçicileri, “::” işaretinden önce ya da sonra gelen hangi pseudo-elementin seçileceğini belirten bir kelimeyle birlikte kullanılır. Örneğin, “::first-line” pseudo-element seçicisi, öğenin ilk satırını seçmek için kullanılırken, “::before” ve “::after” pseudo-element seçicileri, öğe içine içerik eklemek veya stilini değiştirmek için kullanılır. Pseudo-element seçicileri belirli öğelerin belirli bir noktasına erişmek ve stilini değiştirmek için çok kullanışlıdır ve CSS ile daha fazla kontrol sağlar.
- Pseudo-element seçicileri, öğelerin belirli bir noktasını hedeflemek için kullanılır.
- ::first-line, ::before ve ::after gibi yaygın kullanılan pseudo-element seçicileri bulunur.
- Pseudo-element seçicileri, öğelerin içeriğine eklemeler yapmak veya stilini değiştirmek için kullanılabilir.
| Pseudo-Element Seçici | Açıklama |
|---|---|
| ::first-letter | Bir öğenin ilk harfini seçmek için kullanılır. |
| ::first-line | Bir öğenin ilk satırını seçmek için kullanılır. |
| ::before | Bir öğenin içine içerik eklemek için kullanılır. |
| ::after | Bir öğenin sonuna içerik eklemek için kullanılır. |
Eşit-Olmayan Seçiciler: :not()
Eşit-Olmayan seçiciler, CSS’de belirli özelliklere sahip olmayan öğeleri seçmek için kullanılan bir tekniktir. Bu seçici, belirli bir özelliği dikkate almak istemediğimiz durumlarda kullanışlıdır. :not() seçicisi, belirli bir öğeyi hariç tutmak için kullanılır ve CSS kodunda negatif bir koşulu ifade eder.
Eşit-Olmayan seçiciler, genellikle diğer CSS seçicileriyle birlikte kullanılır. Örneğin, bir <p> etiketi içindeki tüm metinleri seçmek istiyoruz, ancak belirli bir sınıfa sahip olanları hariç tutmak istiyoruz. Bu durumda p:not(.belirli-sinif) seçiciyi kullanabiliriz.
Aşağıda, :not() seçicisiyle ilgili bir örnek tablo bulunmaktadır:
| Örnek | Açıklama |
|---|---|
| p:not(.belirli-sinif) | <p> etiketi içindeki tüm metinleri seçer, ancak “belirli-sinif” sınıfına sahip olanları hariç tutar. |
| div:not(#id) | <div> etiketlerini seçer, ancak belirli bir “id” değerine sahip olanları hariç tutar. |
| a:not([href]) | <a> etiketlerini seçer, ancak “href” özelliğine sahip olanları hariç tutar. |
Eşit-Olmayan seçiciler, CSS kodunda belirli özelliklere sahip olmayan öğeleri kolayca seçmemizi sağlar. Bu sayede daha esnek ve dinamik tasarımlar oluşturabiliriz.
Çoklu Öznitelik Seçicileri: []
HTML’nin güçlü özelliklerinden biri de çoklu öznitelik seçicileridir. Bu seçiciler, belirli bir öğeyi birden fazla özniteliğe göre seçmemize olanak sağlar. Çoklu öznitelik seçicilerinin kullanımı oldukça esnektir ve CSS kodlarımızı daha etkili hale getirebilir.
Bir çoklu öznitelik seçicisi kullanırken, seçmek istediğimiz öğenin birden fazla özniteliğini belirtmemiz gerekmektedir. Örneğin, bir <a> etiketine href özniteliği ile birlikte target özniteliğine sahip olan linkleri seçmek istediğimizde aşağıdaki kodu kullanabiliriz.
a[href][target]
Yukarıdaki örnekte, a etiketine sahip olan ve hem href özniteliği hem de target özniteliği olan tüm linkler seçilecektir. Bu şekilde istediğimiz kriterlere uyan öğeleri seçebilir ve onlara özel stil uygulayabiliriz.
Çoklu öznitelik seçicilerini kullanarak, tasarımımızı daha da özelleştirebilir ve istediğimiz öğeleri kolayca seçebiliriz. Bu seçicilerin kullanımı ile CSS kodlarımız daha temiz ve etkili hale gelirken, sayfalarımızın görünümünü daha da geliştirebiliriz.
Örnek Kullanım:
| HTML Kodu | Stil Kodu |
|---|---|
| <a href=”https://www.example.com” target=”_blank”>Örnek Link</a> | p:nth-child(odd) { background-color: #f2f2f2; } |
| <a href=”https://www.example.com”>Diğer Link</a> | p:nth-child(odd) { background-color: #f2f2f2; } |
Yukarıdaki örnekte, a etiketine sahip olan ve hem href özniteliği hem de target özniteliği bulunan tüm linklerin arka plan rengi #f2f2f2 olarak belirlenmiştir. Bu sayede, istediğimiz linklere özel bir stil uygulayarak tasarımımızı daha da zenginleştirebiliriz.
Sık Sorulan Sorular
CSS seçicileri nelerdir ve ne işe yararlar?
CSS seçicileri, HTML belgelerinde belirli elementleri seçmek için kullanılan yapısal ifadelerdir. ID seçicileri (#), belirli bir ID’ye sahip olan elementleri seçmek için kullanılır. Sınıf seçicileri (.), belirli bir sınıfa sahip olan elementleri seçmek için kullanılır. Öznitelik seçicileri ([]), belirli bir özniteliğe veya öznitelik değerine sahip olan elementleri seçmek için kullanılır. Pseudo-öğe seçicileri (::), belirli bir öğenin belirli bir durumu veya durumuna sahip olan elementleri seçmek için kullanılır. Eşit olmayan seçiciler (:not()), belirli bir özelliğe veya değere sahip olmayan elementleri seçmek için kullanılır. Çoklu öznitelik seçicileri ([]), birden fazla özniteliğe sahip olan elementleri seçmek için kullanılır.
ID seçicisi nasıl kullanılır ve hangi durumlarda tercih edilir?
ID seçicisi (#), bir HTML elementine benzersiz bir kimlik vermek için kullanılır. ID seçicisi yalnızca belirli bir sayfada yalnızca bir kez kullanılabilir ve yalnızca bir elementi seçmek için kullanılır. ID seçici kullanarak stil verilerini belirli bir elemente uygulayabilir, elemente özel bir görünüm veya davranış sağlayabilirsiniz. ID seçicisi, belirli bir elementin stilini değiştirmek veya bir olaya yanıt olarak belirli bir elementi güncellemek gibi durumlarda tercih edilir.
Sınıf seçicisi nedir ve ne zaman kullanılır?
Sınıf seçicisi (.), birden fazla elemente aynı stili uygulamak veya belirli bir grup elementi seçmek için kullanılır. Sınıf seçicisiyle belirli bir özellik veya davranışa sahip olan elementlere aynı stil verilebilir. Sınıf seçicisi, birden fazla elemente aynı stili uygulamak veya özelleştirmek istediğimizde kullanılır. Örneğin, tüm düğmeleri veya tüm başlıkları aynı stille biçimlendirmek için sınıf seçicisi kullanılabilir.
Öznitelik seçicisi nasıl kullanılır ve ne işe yarar?
Öznitelik seçicisi ([]), belirli bir elementin belirli bir özniteliğe veya öznitelik değerine sahip olup olmadığını kontrol etmek için kullanılır. Öznitelik seçicisi kullanarak belirli bir özniteliğe sahip olan elementleri seçebilir veya belirli bir değere sahip olan elementleri seçebilirsiniz. Örneğin, href özniteliğine sahip olan tüm bağlantıları veya target=”_blank” olan tüm bağlantıları seçmek için öznitelik seçicisini kullanabilirsiniz.
Pseudo-öğe seçicisi nedir ve hangi durumlarda kullanılır?
Pseudo-öğe seçicisi (::), bir elementin belirli bir durumu veya durumuna sahip olup olmadığını kontrol etmek için kullanılır. Pseudo-öğe seçicisiyle belirli bir öğenin belirli bir durumunu hedefleyebilir ve stil uygulayabilirsiniz. Örneğin, bir linkin ziyaret edilmiş durumunu veya bir metin kutusununken durumunu hedeflemek için pseudo-öğe seçicisi kullanılabilir.
Eşit-olmayan seçici nedir ve nasıl kullanılır?
Eşit-olmayan seçici (:not()), belirli bir özelliğe veya değere sahip olmayan elementleri seçmek için kullanılır. Eşit-olmayan seçici kullanarak belirli bir özelliğe veya değere sahip olmayan elementleri hedefleyebilirsiniz. Örneğin, belirli bir sınıfa sahip olmayan tüm elementleri seçmek için :not(.className) şeklinde eşit-olmayan seçicisini kullanabilirsiniz.
Çoklu öznitelik seçici nasıl kullanılır?
Çoklu öznitelik seçicileri ([]), birden fazla özniteliğe sahip olan elementleri seçmek için kullanılır. Çoklu öznitelik seçicisi kullanarak birden fazla özniteliği bir arada kullanarak elementleri seçebilirsiniz. Bir öznitelik seçicisi kullanmak yerine birden fazla öznitelik seçicisini bir arada kullanmak, daha spesifik bir seçim yapmanıza olanak sağlar. Örneğin, data-type=”book” ve data-category=”fiction” özniteliklerine sahip olan tüm elementleri seçmek için [data-type=”book”][data-category=”fiction”] şeklinde çoklu öznitelik seçicisini kullanabilirsiniz.