CSS Seçicileri, bir web sitesinin tasarım ve stilini belirlemek için kullanılan kod bloklarıdır Temel Seçiciler, HTML elementlerini belirli kriterlerine göre seçmek için kullanılır ID seçicileri ve sınıf seçicileri, web sayfalarında belirli bir element grubunu veya belirli bir öğeyi seçmek için sıkça kullanılır ID seçicileri, benzersiz bir elementi belirlemek için kullanılır Sınıf seçicileri ise birden fazla elementin stili için kullanılır Bu seçiciler ile birlikte kullanılan seçiciler ile sınıf adına sahip tüm elementlerin stil özelliklerini aynı anda değiştirebilirsiniz
CSS, bir web sitesinin stili ve tasarımını belirleyen bir dildir. CSS seçicileri, elemanları seçmek için kullanılan komutlardır ve kodu düzenlemek için önemlidir. Seçiciler, web geliştiricilerinin öğeleri belirleyip stil özelliklerini ekledikleri ve değiştirdikleri bir yöntem sunar.
CSS seçicileri, tasarım sürecinde büyük bir esneklik sağlar. Farklı öğeleri hızlı bir şekilde seçmek için kullanabilen web geliştiricileri, sitelerinin stilini daha rahat bir şekilde yapılandırabilirler. Bu seçicilerin kullanımı, bir web sitesinin hızlı bir şekilde değiştirilmesini sağlar. Örneğin bir web sitesindeki tüm H1 etiketleri stilini değiştirmek istediğinizde, sadece birkaç CSS kodu ile bu işlemi gerçekleştirebilirsiniz.
CSS seçicileri, HTML elementlerinde seçmek için kullanılan temel seçiciler, ID ve Sınıf seçicileri, alt elementlerin seçilmesi ve pseudo-seçicileri olarak dört ana başlık altında incelenebilir. Bu seçicilerin kullanımı ile bir web sitesinin tasarımı ve stil özellikleri hızlı ve etkili bir şekilde değiştirilebilir.
Temel Seçiciler Nedir?
CSS seçicileri, HTML sayfalarındaki elementleri, belirli bir şekilde seçmek ve stil uygulamak için kullanılan önemli kod bloklarıdır. Temel seçiciler, HTML elementlerini belirli kriterlerine göre seçmek için kullanılır. Bu seçiciler sayesinde, tüm HTML sayfanızın veya belirli bölümlerinin stilini oluşturma imkanı elde edersiniz.
Temel seçici türleri arasında, elementin kendisini seçmek için kullanılan element seçicileri, ID'leri seçmek için kullanılan #ID seçicileri ve sınıfları seçmek için kullanılan .class seçicileri bulunur. Bu temel seçiciler ile HTML elementleri seçilerek, onlara CSS kodları eklenerek stil verilebilir.
| Temel Seçici Türleri | Açıklama |
|---|---|
| Element Seçicileri | HTML elementlerini doğrudan seçmek için kullanılır. |
| ID Seçicileri | HTML elementleri için benzersiz kimlikleri (IDs) kullanarak seçme imkanı sunar. |
| Sınıf Seçicileri | HTML elementleri için özelliklerini (sınıflarını) kullanarak seçme imkanı sunar. |
Örneğin, <p> etiketlerinin stilini değiştirmek istiyorsanız, element seçicisi olarak <p> seçicisini kullanabilirsiniz. Benzersiz bir HTML element ID'si kullanarak <div id="example"> elementini seçmek istiyorsanız, #example seçicisini kullanabilirsiniz. Aynı şekilde, belirli bir sınıfı olan öğeleri seçmek için .class seçicisini kullanabilirsiniz.
- Element seçicisi örneği: <p>{ color: red; }</p>
- ID seçicisi örneği: <div id="example">{ font-size: 14px; }</div>
- Sınıf seçicisi örneği: <p class="example">{ font-weight: bold; }</p>
Temel seçiciler, web sitenizin CSS kodlarını okunaklı ve düzenli hale getirmenize yardımcı olur. Aynı zamanda, web sayfalarının hızlı yüklenmesi için de oldukça önemlidirler. Bu sebeple, temel seçicilerin doğru kullanımı, web sayfası tasarımında büyük bir öneme sahiptir.
ID ve Sınıf Seçicileri ile Çalışmak
CSS seçicileri, sayfanın elementlerini belirlemek ve istenilen stili uygulamak için kullanılır. ID seçicileri ve sınıf seçicileri, web sayfalarında belirli bir element grubunu veya belirli bir öğeyi seçmek için sıkça kullanılır. Bu seçiciler sayesinde CSS kodları daha kolay ve verimli bir şekilde yönetilebilir.
ID seçicileri, benzersiz bir elementi belirlemek için kullanılır. ID'ler sayfa içerisinde yalnızca bir defa kullanılabilir. ID seçicileri kullanarak, belirli bir elementin stilini hızlı ve kolay bir şekilde değiştirebilirsiniz. Ayrıca, ID seçicileri kullanarak elementlere ait özelliklere erişebilirsiniz.
Sınıf seçicileri ise birden fazla elementin stili için kullanılır. Sınıf adları, birden fazla elemente atanabilir ve bir elemente birden fazla sınıf da atanabilir. Sınıflar ile birlikte kullanılan seçiciler ile sınıf adına sahip tüm elementlerin stil özelliklerini aynı anda değiştirebilirsiniz. Bu sayede, web tasarımında tutarlı bir görünüm sağlanabilir.
| ID Seçicileri Kullanımı | Sınıf Seçicileri Kullanımı |
|---|---|
| #header {color: blue;} | .menu {background-color: purple;} |
| #section1 {font-size: 16px;} | .sidebar {border: 1px solid black;} |
Yukarıdaki örnekte, ID seçicileri ve sınıf seçicileri kullanılarak stil özellikleri belirlenmiştir. ID seçicileri, # sembolü ile tanımlanırken, sınıf seçicileri ise . sembolü ile tanımlanır.
Web sayfalarında, birden fazla elementin aynı stil özelliğine sahip olması durumunda, bu elementler için ortak bir sınıf belirlenebilir. Bu sınıf seçicisi ile birlikte kullanılan diğer seçiciler ile sınıfa sahip tüm elementlerin stil özellikleri aynı anda değiştirilebilir. Böylece, sayfanın tutarlı bir görünümü sağlanabilir.
- .menu {background-color: red;}
- .footer {font-size: 14px;}
- .sidebar {width: 20%; float: left;}
Yukarıdaki örnekte, sınıf seçicileri kullanılarak ortak stil özellikleri belirlenmiştir. Sayfa içerisinde yer alan tüm menülerin arka plan rengi kırmızı, footer'ın yazı tipi boyutu 14px, tüm sidebar'ların genişliği %20 ve sol tarafta konumlandırılması gibi özellikler belirlenmiştir.
ID Seçicileri
CSS seçicileri web sayfalarının stilini belirlemek için oldukça önemlidir. Bu seçiciler, belirli HTML elementlerini seçerek stil ayarlamalarını yapmamızı sağlar. ID seçicileri de bu seçiciler arasında en önemlilerinden biridir. ID seçicileri tek bir HTML elementini seçmek için kullanılır.
ID seçicilerinin en büyük avantajlarından biri, özdeşleşme özellikleridir. Bir elementin yalnızca bir ID'si olabilir ve bu ID sadece bir kez kullanılabilir. Bu, stil ayarlamaları sırasında çakışmaları önler ve daha kolay bir kod düzenlemesi sağlar.
Bununla birlikte, ID seçicilerinin dezavantajları da bulunmaktadır. ID seçicileri, yalnızca tek bir HTML elementini seçme özelliğine sahiptir. Birden fazla element üzerinde çalışmak istediğimizde, her bir ID için ayrı CSS kodu yazmamız gerekir. Bu durum, kod tekrarına neden olabilir ve stil ayarlamalarının zaman alıcı hale gelmesine sebep olabilir.
#ID ile Özdeşleşme
#ID ile Özdeşleşme
CSS'te #ID ile özdeşleşme olarak tanımlanan seçici, sayfadaki öğelerin bir kimliğine bağlanır ve bu öğeleri diğerlerinden ayırt etmeye yarar. #ID'leri, belge içinde yalnızca bir kez kullanmak gerekir. Bu özellik, her sayfanın bir ana sayfası veya başka özel bir sayfası olması durumlarında oldukça faydalıdır.
Bir elemente #ID seçici ile stil eklemek için, #ID seçicisinin başına # sembolü eklenir ve elementin ID'si yazılır. Örneğin:
| HTML Kodu | CSS Kodu |
|---|---|
| <div id="header">Bu bir başlıktır</div> | #header { background-color: yellow; } |
Yukarıdaki örnekte, HTML'de <div> etiketi bir ID değeri olan "header" ile belirtilmiştir ve CSS kodu #header seçicisi ile birlikte gelecek şekilde ayarlanmıştır. Bu, sayfadaki sadece bu div elementinin arka plan rengini sarıya dönüştürür.
İyi bir özdeşleşme için, ID değeri açık ve özlü olmalı ve diğer elementlerden kolaylıkla ayırt edilebilmelidir.
ID Seçicileri ile Nesne Stillendirme
CSS'nin en başarılı kullanım yöntemlerinden biri de nesnelere ID seçicileriyle stil vermektedir. ID seçicileri, HTML kodundaki bir öğeyi özelleştirmek için kullanılır. Bu seçiciler, bir nesneye benzersiz bir özellik kazandırarak stil uygulamak istediğimizde kullanışlıdır.
Bu seçici yöntemi, genellikle bir öğenin yalnızca bir kez kullanılacağı ve birden fazla nesne tarafından paylaşılmayacağı durumlarda kullanılır. ID seçicilerinin kullanımı, kod okunabilirliğini ve düzenlenmesini de kolaylaştırır.
Bir nesneye stil eklemek için önce ID seçicileri oluşturulmalıdır. Bu seçici, bir HTML öğesine bir kimlik (ID) değeri ekleyerek yapılır. Bu kimlik, stil uygulamak istediğimiz öğede yalnızca bir kez kullanılabilir.
| HTML Kodu | CSS Kodu |
|---|---|
| <div id="menu"></div> | #menu { background-color: yellow; } |
Bu örnekte, bir `div` öğesi ID seçicisi "#menu" ile stil işlenebilmektedir. CSS kodu, öğeye sarı bir arka plan rengi vermek üzere kullanılır.
Bir nesneye ID seçicileri ile stil eklerken, nesne üzerinde birden fazla stil belirlemek mümkündür. Tek bir stil belirtmek yerine, birkaç stil ögesi kullanılarak birden fazla stil tanımlaması yapılabilir.
| HTML Kodu | CSS Kodu |
|---|---|
| <div id="header"></div> | #header { font-size: 24px; color: #fff; } #header { background-color: blue; } |
Bu örnekte, bir `div` öğesi ID seçicisi "#header" ile stil işlenmektedir. CSS kodu, öğeye beyaz renkli, 24px yazı tipi boyutlu metin ve mavi arka plan rengi vermek üzere kullanılır.
Sınıf Seçicileri
Sınıf seçicileri, birden fazla elementin stilini aynı anda değiştirmek için kullanılan güçlü bir araçtır. Aynı sınıfa ait birçok elementi seçmek için "." (nokta) işareti kullanılır. Örneğin, "class='btn'" şeklinde bir kodda, "btn" sınıfına ait tüm elementler stil değişikliği için seçilebilir.
Sınıf seçicileri, herhangi bir HTML elementine eklenen bir veya birden fazla sınıf adıyla belirlenir. Birden fazla class adı kullanılıyorsa, "." işareti ile ayrılır. Sınıf seçicileri kullanarak aynı stil özelliklerini paylaşan tüm elementleri seçebilirsiniz.
Sınıf seçicilerinin kullanımı oldukça kolaydır ve birçok stil uygulaması için çok uygun bir yöntemdir. Örneğin, bir web sitesindeki tüm düğmelerin aynı şekilde görünmesini sağlamak isterseniz, düğmelerin ortak sınıf adını belirleyerek stil özelliklerini kolayca paylaştırabilirsiniz.
Ayrıca, sınıf seçicilerini kullanarak belirli bir sayfada birden fazla elementi seçmek de mümkündür. Örneğin, bazı ürünlerin açıklama kısmında benzer bir yapı varsa, stil değişikliği yapmak için hepsini seçmek isteyebilirsiniz. Bu durumda, tüm elementlere aynı sınıf adını eklediğinizde, CSS kodu ile hepsini aynı anda seçebilirsiniz.
Sınıf seçicilerinin öncelik değerleri de önemlidir. Eğer aynı özelliği farklı sınıflara uygularsanız, CSS önceliği kavramını ve öncelik değerlerini iyi anlamak gerekir. Bu sayede, istediğiniz stil değişikliklerini daha etkili ve doğru bir şekilde yapabilirsiniz.
Sınıf seçicileri, CSS kodlarını yönetmekte önemli bir araçtır. Hem basit hem de etkili bir kullanım sunarlar ve birden fazla elementin stilinin değiştirilmesi konusunda büyük kolaylık sağlarlar.
Sınıf Seçicileri ile Birden Fazla Elementi Seçme
Sınıf seçicileri, birden fazla elementin stilini değiştirmek için çok kullanışlıdır. İşin güzelliği, sayfa genelinde birden fazla öğeyi değiştirirken sadece belirli sınıflara stil ekleyebilirsiniz. Bu, belirli öğelerin stilini değiştirirken diğer öğeleri etkilemeden yapılabilir.
Bir sayfada birden fazla öğeyi seçmek için sınıf seçicileri kullanmanın yöntemleri şunlardır:
- Bir sayfada birden fazla öğeyi seçmek için " . " sembolünü kullanın.
- HTML etiketinde belirli bir sınıf kullanmak istiyorsanız, örneğin "class = 'my-class' ", sınıf adınız "my-class" olacaktır. Aynı sınıf adını birden fazla öğede kullanabilirsiniz.
- CSS'de belirli bir sınıfa stil uygulamak istiyorsanız, ".my-class" gibi sınıf adınızı seçici olarak kullanabilirsiniz. Bu, sınıf adının tüm öğelerinde stil değişikliği yapacaktır.
Örneğin, bir HTML sayfanız varsa ve sayfanızda birden fazla "div" öğesi varsa, belirli bir sınıf adı vererek stil değişikliği yapabilirsiniz. Örneğin:
Benim Div öğem
Benim İkinci Div öğem
Yukarıdaki örnekte, "my-div" sınıf adı iki farklı "div" öğesi için kullanılmaktadır. CSS sayfanızda ".my-div" seçiciyi kullanarak bu öğelerin stilini değiştirerek iki "div" öğesinin stili ayrı ayrı ayarlanabilir.
Sınıf Seçicileri ve Öncelik Değerleri
CSS seçicileri kullanılarak stil verilen öğelerde belirli bir sıralama içerisinde öncelik değerleri verilir. Bu öncelik değerleri doğru bir şekilde belirlenmediğinde, istenilen sonuçlar elde edilemeyebilir. Öncelik değerleri, belirli bir öğeye stil verme amacıyla aynı özelliklere sahip birden fazla seçici kullanıldığında belirlenir.
Öncelik değerleri belirlenirken temel olarak üç farklı kriter göz önünde bulundurulur. Bu kriterler şu şekildedir:
1. Seçici tipi: Seçici tipine göre öncelik değerleri belirlenir. Örneğin, ID selektörleri class selektörlerine göre daha yüksek öncelik değerine sahiptir.
2. Belirleyiciler: Belirleyiciler, direkt olarak elementlerin kendisiyle ilgilidir. Örneğin, inline stil öncelik değeri daha yüksektir.
3. Önceki seçicilerin sayısı: Önceki seçicilerin sayısı arttıkça, öncelik değeri de artar.
Bu kriterler göz önünde bulundurularak, sınıf seçicilerinin öncelik değeri, diğer seçici tiplerine göre biraz daha düşüktür. Ancak, sınıf seçicilerinin öncelik değerini arttırmak için doğru kullanım yöntemleri uygulanabilir.
Örneğin, birden fazla sınıf seçicisi kullanılacaksa, öncelik değerleri arttırmak için önem sırası yüksek olan sınıf seçicileri en başta yazılabilir. Örneğin, '.menu-link' sınıfı ile '.red-link' sınıfı aynı elemente uygulanacaksa, '.menu-link' sınıfı önce yazılırsa, öncelik değeri artacaktır.
Öncelik değerlerinin doğru bir şekilde belirlenmesi ve sınıf seçicilerinin uygun kullanımı, istenilen sonuçların elde edilmesinde oldukça önemlidir. Doğru bir şekilde kullanıldığında, sınıf seçicileri sayesinde birden fazla öğeye kolayca stil verilebilir ve CSS kodları daha anlaşılır hale getirilebilir.
Alt Elementlerin Seçilmesi
CSS seçicileri, web sayfalarındaki farklı HTML elementlerinin stilini belirlemek için kullanılan önemli araçlardır. Alt elementlerin seçilmesi de bu stil tanımlama sürecinde önemli bir rol oynamaktadır.
Bir ana elementin altındaki alt elementleri seçmek için kullanılan en yaygın seçici yöntemi, alt elemanların HTML yapısındaki sıralamasını kullanarak tam yol seçicileridir. Böylece CSS kodları, belirli bir ana elementin altındaki tüm alt elementleri seçebilir.
| HTML Kodu | CSS Kodu |
|---|---|
<div id="anaElement"> <p>Alt element 1</p> <ul> <li>Alt element 2</li> <li>Alt element 3</li> </ul></div> | #anaElement ul li { color: red;} |
Bu örnekte, <ul> etiketinin içindeki tüm <li> etiketleri seçildi ve stil olarak kırmızı renk olarak belirlendi.
Bunun yanı sıra, CSS kodları ile bir alt elementin doğrudan özdeşleştirilerek seçilmesi de mümkündür. Bu da genellikle daha spesifik bir seçim yapılmasını sağlar. Örneğin:
| HTML Kodu | CSS Kodu |
|---|---|
<div id="anaElement"> <p>Alt element 1</p> <ul> <li>Alt element 2</li> <li id="ozel">Alt element 3</li> </ul></div> | #anaElement #ozel { font-weight: bold;} |
Bu örnekte, <li id="ozel"> etiketi seçilerek kalın yazı tipi olarak stil tanımlandı. Bu yöntem, özellikle bir alt elementin kendine özgü stil özellikleri bulunması durumunda kullanılabilir.
Tam Yol Seçicileri
Tam yol seçicileri, CSS’in önemli bir parçasıdır ve alt elementleri seçmek için kullanılır. Bu seçici, bir elementin tüm alt elementlerini seçme kabiliyetine sahiptir. Tam yol seçici, her alt elementin kimliklerini, sınıflarını ve etiketlerini kullanarak bir elementi seçerken izlediği yolu ayrıntılı bir şekilde belirtir.Tam yol seçicileri, önce bir üst seviyedeki elementi, ardından bir sonraki seviyedeki alt elementierini seçmek için kullanılır. Örneğin,- öğesinin altındaki
- öğelerini seçmek istiyorsanız, "ul li" tam yol seçicisini kullanabilirsiniz. Bu seçici, doğrudan
- öğelerini seçecektir ve daha derin bir seviyedeki elementler etkilenmeyecektir.Bir diğer örnek ise, içindeki
öğelerini seçmek istediğimizde "div p" tam yol seçicisini kullanabiliriz. Bu seçici,
öğesinin içindeki tümöğelerini seçecektir.Tam yol seçicileri aynı zamanda birçok avantaj da sağlar. İhtiyacımız olan öğeleri daha doğru bir şekilde seçme kabiliyeti, daha az kod yazma işlemi ve daha kolay stil değiştirme işlemi yapma imkanı sağlar. Bu seçiciler sayesinde, daha temiz ve daha organize bir kod yazılabilir.Sonuç olarak, tam yol seçicileri, alt elementleri seçmek için kullanılan etkili bir CSS seçicisidir. Alt elementleri seçme işlemini daha kolay ve daha doğru bir şekilde gerçekleştirmemizi sağlar. Tam yol seçicileri, CSS kod yazarken güçlü bir araç olarak kullanılabilir ve bu sayede daha profesyonel bir tasarım ortaya çıkarılabilir.
Komşu Element Seçicileri
Komşu element seçicileri, HTML belgesinde aynı seviyedeki öğelerin tarzını değiştirme yöntemidir. Bu seçiciler, belirli bir öğe yanındaki öğeleri hedef alır. Örneğin, bir liste ögesi içindeki her bir listeyi, bir arka plan rengi ve kenar boşluğu vermek isteyebilirsiniz. Ancak, bu seçici belirli bir sınıf veya ID'ye sahip öğeleri hedef almaz.
Komşu element seçicisi, iki öğeyi hedef alır. İlk öğe, belirli bir tarzı uygulamak istediğiniz öğe, ikinci öğe ise hedeflenen öğeden sonra gelecek olan öğedir. Bu seçici, "+" sembolüyle belirtilir.
Örneğin, aşağıdaki kod örneğinde, bir liste öğesine tıkladığınızda, yalnızca o öğeyi değil, aynı zamanda onu takip eden bir sonraki liste öğesine de stil ekledik:
```li:hover { background-color: yellow;}li:hover + li { background-color: red;}```
Burada, liste öğeleri üzerinde gezinirken, tıkladığınız öğenin arka plan rengi sarıya dönüşür. Ayrıca, tıklanan öğeden sonra gelen öğenin arka plan rengi kırmızıya dönüşür. Bu şekilde, tıklanan öğeyi ve takip eden öğeleri hedef alarak görsel bir iyileştirme yapmanız mümkündür.
Komşu element seçicileri, bir öğenin görünümünü değiştirmek istediğinizde oldukça kullanışlıdır. Ancak, yalnızca hedeflediğiniz öğeden sonra gelen tek öğeyi hedeflemeniz gerektiğini unutmayın. Aynı seviyedeki birden fazla öğeyi hedef almak için başka yöntemler kullanmanız gerekebilir.
Pesudo Seçiciler
CSS seçicileri, bir web sayfasındaki HTML öğelerine stil uygulamak için kullanılır. Pseudo seçiciler, daha spesifik seçicilerdir ve farklı etkileşim durumlarında kullanılırlar. Pseudo seçicilerin kullanımı, web sayfasının estetiği ve işlevselliği üzerinde büyük bir etkiye sahiptir.
:hover ve :active pseudo seçicileri, kullanıcı web sayfasındaki öğelerin üzerine geldiğinde veya öğelere tıklandığında değişiklikler yapmak için kullanılır. Bu seçicilerle birlikte, görünümde ani değişiklikler yaparak kullanıcının web sayfasındaki etkileşimini arttırmak mümkündür. Görünümdeki değişiklikler, açılır kutular, form düğmeleri ve diğer öğelerde yapılabilir.
:nth-child pseudo seçicisi, belirli bir elemanın ana veya alt elementleri arasındaki sıralamasını belirlemek için kullanılır. Bu seçici, öğelerin düzenlenmesinde büyük bir esneklik sağlar. Öğelerin sıralamasını değiştirerek, web sayfasının görsel hiyerarşisini etkileyebilirsiniz.
:first-child pseudo seçicisi, belirli bir elemanın ilk alt elemanını seçmek için kullanılır.
Bu seçiciyle birlikte, özellikle liste elemanlarındaki farklı görünümleri kontrol etmek kolaylaşır. Ayrıca, içerik bölmelerinde ilk öğelerin stilini değiştirmek mümkündür.
Yukarıda bahsedilen pseudo seçicilerin yanı sıra, :not, :checked ve :before veya :after pseudo seçicileri de kullanılabilir. Bu seçicilerin doğru bir şekilde kullanılması, web sayfasının stil ve işlevselliğini arttırabilir ve daha üstün bir kullanıcı deneyimi sunabilir.
Hover ve Active Seçicileri
Web tasarımlarında hover ve active seçicileri görsel açıdan önemli bir etkiye sahip olabilir. Hover seçicisi, bir öğe üzerine fare imleci geldiğinde öğenin farklı bir stil kullanıcılara sunulmasıdır. Active seçicisi ise, kullanıcının fare tuşlarına basılı tuttuğu veya tıkladığı anda öğenin stilinin değişmesidir.
Özellikle butonlar, linkler veya navigasyon menüleri gibi öğelerde hover ve active seçicilerini kullanmak oldukça yaygındır. Hover seçicileri ile fare imleci üzerine geldiğinde butonun veya linkin altı çizilebilir, arka planı veya yazı rengi değiştirilebilir. Active seçicileri ise, kullanıcının butona tıkladığı anda butonun stili değiştirilebilir.
CSS kodlarında hover ve active seçicilerini kullanmak oldukça basittir. Örneğin, bir butona hover seçicisi ile altı çizili bir stil eklemek için aşağıdaki kodu kullanabilirsiniz:
button:hover { text-decoration: underline;}
Aynı şekilde, active seçicisi ile butonun arka planını değiştirmek için aşağıdaki kodu kullanabilirsiniz:
button:active { background-color: red;}
Hover ve active seçicileri genellikle tek başına kullanılmaz, diğer seçiciler veya pseudo-seçiciler ile birlikte kullanılır. Örneğin, hover seçicisi ile bir linkin rengi değiştirilebilirken, aynı linkin nasıl göründüğü ziyaret edilmiş bir linkken değiştirilmesi için aşağıdaki kodu kullanabilirsiniz:
a:hover { color: red;}
a:visited:hover { color: blue;}
Hover ve active seçicileri, web tasarımında görsel olarak dikkat çekici olmayı sağlayarak kullanıcılarda estetik bir görünüm bırakabilir. Bu seçicileri doğru bir şekilde kullanarak web sitenizin tasarımını geliştirebilirsiniz.