CSS'de kullanılan pseudo sınıfları öğrendikten sonra, web sitelerimizde elementlerin belirli durumlarında stil belirlemek için bu sınıfları kullanabiliriz Hover pseudo sınıfı, bir elemanın üzerine gelindiğinde görüntülenen CSS seçicisidir; active pseudo sınıfı, bir öğe tıklanırken ve tıklama işlemi devam ederken kullanılır; focus pseudo sınıfı, bir eleman focus halindeyken stil değişikliği yapmak için kullanılır; ve visited pseudo sınıfı, kullanıcı tarafından daha önce ziyaret edilmiş olan bir bağlantıyı belirtmek için kullanılır Bu pseudo sınıflar, web tasarımcılarının sitelerinin kullanılabilirliğini artırmak için sıklıkla kullandığı bir araçtır
CSS, yani Cascading Style Sheets, web geliştirme işinde önemli bir yer tutmaktadır. Web sayfalarını tasarlamak için kullanılan CSS, sayfaların görünümünü güzelleştirirken, hızlı bir şekilde düzenlemeler yapmamıza olanak tanır. CSS'nin birçok özelliği bulunur ve bunlardan biri de "pseudo sınıfları" olarak adlandırılan farklı sınıfların kullanımıdır.
Pseudo sınıfları, CSS'de öğelerin belirli durumlarında stil belirlememize olanak tanıyan sınıflardır. Örneğin, ziyaret edilen bir bağlantının rengini değiştirmek veya bir form elemanı üzerine gelindiğinde rengini değiştirmek gibi durumlarda pseudo sınıflar kullanılır.
CSS'de kullanılabilen pek çok pseudo sınıfı bulunmaktadır. Bu pseudo sınıflar; hover, active, focus, visited, target, before ve after, not, lang sınıflarıdır. Bu pseudo sınıfların kullanımları ve örnek kodlarını birlikte inceleyelim.
Hover Pseudo Sınıfı
Birçok web geliştiricisi, HTML ve CSS seçicileri arasındaki farkı anladıktan sonra, iki tip CSS pseudo sınıfını keşfetmektedir. Bunlar, elemanların bir olayın gerçekleşmesi durumunda farklı şekillerde gösterilmesini sağlayan durumsal seçicilerdir. Bunların birincisi, Hover pseudo sınıfıdır.
Hover pseudo sınıfı, bir web sayfasındaki bir elemanın üzerine geldiğinde görüntülenen CSS seçicisidir. Örneğin, bir sayfadaki bir bağlantıya tıklanmaması durumunda, kullanıcının farenin üzerindeki konumu hover pseudo sınıfını tetikler ve bağlantının rengini veya arkaplanını değiştirebilir. Aşağıdaki örnekte, hover pseudo sınıfı a etiketi için uygulanmıştır:
| CSS | HTML |
|---|---|
| a:hover { color: red; background-color: yellow; } | <a href="#"> Link </a> |
Bu örnekte, eğer fare kullanıcının üzerindeyken a etiketi üzerinden geçerse, hem yazı rengi hem de arka plan rengi değişecektir.
Active Pseudo Sınıfı
Active Pseudo Sınıfı, bir öğe tıklanırken ve tıklama işlemi devam ederken kullanılır. Örneğin, bir düğmeye tıklandığında, düğmenin renginin değişmesi gibi özellikler eklemek için kullanılır.
Bu pseudo sınıfı, hem CSS hem de JavaScript kodları oluşturmak için çok kullanışlıdır. Bu pseudo sınıfını kullanarak öğelerin durumunu ve işlevselliğini belirleyebiliriz.
Örneğin, aktif bir düğme veya form alanının farklı bir görünümü olabilir. Bu, kullanıcının belirtilen öğeleri tıklar tıklamaz veri girişinin doğruluğunu doğrulamasına yardımcı olabilecek bir görsel ipucu sağlar.
Aşağıdaki örnek kod, bir active pseudo sınıfı kullanarak bir düğmenin tıklanırken rengini değiştirir:
```button:active { background-color: red;}```
Yukarıdaki kod, bir düğme tıklandığında bir kırmızı arkaplan rengi ayarlar. Bu tıklama işlemi devam ettiği müddetçe değişiklik kalıcı olacaktır.
Active pseudo sınıfı, öğelerin kullanıcının etkileşimiyle nasıl davrandığını belirlemek için kullanılabilir. Bu pseudo sınıfı, kullanıcı deneyimini geliştirmek için önemli olan birçok CSS özelliğinin uygulanmasında önemlidir.
Focus Pseudo Sınıfı
Focus pseudo sınıfı, bir element focus halindeyken stil değişikliği yapmak için kullanılır.
Focus, tıklanabilir elemanların üzerine gelindiğinde veya klavyeden shift veya tab tuşları kullanıldığında oluşur.
Örneğin, bir form elemanı focus halindeyken, kullanıcının o elemana veri girişi yapabileceği anlamına gelir. Bu nedenle, focus pseudo sınıfı, kullanıcıların neyin seçilebilir olduğunu ve neyin seçilemez olduğunu anlamalarını kolaylaştırabilir.
Focus pseudo sınıfını kullanarak, focus halindeyken bir elemanın arka plan rengi, kenar boşluğu veya metin rengi gibi birçok özelliğini değiştirebilirsiniz.
Örneğin, bir input alanı focus halindeyken arka plan rengini mavi olarak değiştirmek için aşağıdaki kodu kullanabilirsiniz:
input:focus { | background-color: blue; | } |
Bu kod, input alanı focus halindeyken arka plan rengini mavi olarak değiştirir. Aynı kodu kenar boşluğu veya metin rengi gibi başka bir stil özelliği için de kullanabilirsiniz.
Focus pseudo sınıfı, sitenizin kullanılabilirliğini artırmak için önemli bir araçtır ve web tasarımcıları tarafından sıklıkla kullanılır. Ancak, focus pseudo sınıfı, dinamik olarak oluşturulan içeriklerde veya Ajax ile yüklenen içeriklerde bazen kullanımının sınırlı olabileceği unutulmamalıdır.
Visited Pseudo Sınıfı
CSS pseudo sınıfları oldukça önemli ve kullanışlı bir özelliktir. Bu sınıflar sayesinde web sitelerindeki elementlerin belirlenmiş durumlarında CSS kodlamaları farklı şekillerde uygulanabilir. İşte bu nedenle bu yazıda, Visited Pseudo Sınıfı'nı anlatmaya devam ediyoruz.
Visited pseudo sınıfı, kullanıcı tarafından daha önce ziyaret edilmiş olan bir bağlantıyı belirtmek için kullanılır. Bu sınıf, ziyaret edilmiş olan bağlantının rengini ya da fontunu değiştirmek gibi farklı CSS kodlamaları uygulamak için kullanılabilir.
Aşağıda, Visited Pseudo Sınıfı'nın kullanımına yönelik örnek bir kod bulabilirsiniz:
| Kod | Açıklama |
|---|---|
| a:visited | Ziyaret edilmiş olan bağlantı için CSS özellikleri uygular |
Yukarıdaki örnekte görüldüğü gibi, visited pseudo sınıfını kullanmak için a etiketi ve visited kelimesi kullanılır. Bu sayede, sayfada daha önceden ziyaret edilmiş olan ve mavi renkle gösterilen bir bağlantı, visited pseudo sınıfı sayesinde farklı bir renkle veya font ile gösterilebilir.
Visited pseudo sınıfı, kullanıcı deneyimini artırmak için oldukça önemlidir. Kullanıcılara, daha önce ziyaret ettikleri sayfalarda zaman kaybetmeleri ya da yanlış sayfaya yönlendirilmeleri konusunda bilgi vererek, web sitesi sahiplerine avantaj sağlar.
Target Pseudo Sınıfı
Target pseudo sınıfı, web geliştirme alanında oldukça sık kullanılan bir CSS pseudo sınıfıdır. Bu pseudo sınıfı, bir HTML sayfasındaki hedeflenen bir bölgeye uygun stil uygulanmasına olanak tanır. Target pseudo sınıfı, :target ile temsil edilir ve sadece bağlantıda belirtilen hedefin stilini değiştirir.Bu pseudo sınıfı, web sitelerinde belirli menülerin etkinleştirilmesi veya açılır içerik bölümlerinin gösterilmesi gibi durumlarda sıkça kullanılır. Hemen aşağıda, Target pseudo sınıfına örnek olarak bir menü örneği verilmiştir.Bir menü örneği için:
<nav> <ul> <li><a href="#section1">Bölüm 1</a></li> <li><a href="#section2">Bölüm 2</a></li> <li><a href="#section3">Bölüm 3</a></li> </ul></nav> <section id="section1"> <h2>Bölüm 1</h2> <p>Bu bölümdeki açıklamalar.</p></section> <section id="section2"> <h2>Bölüm 2</h2> <p>Bu bölümdeki açıklamalar.</p></section> <section id="section3"> <h2>Bölüm 3</h2> <p>Bu bölümdeki açıklamalar.</p></section>Yukarıdaki örnekte, menü bağlantıları ##section1, ##section2 ve ##section3 id'lerine sahiptir. Bu id'leri section bölümleriyle ilişkilendirerek, hedeflenen bölgeye stil tanımlanabilir. Hemen aşağıda verilen CSS kodu, menü öğelerini hedeflendiren stil örnekleridir.
#section1 {background-color: lightblue;}#section2 {background-color: lightgreen;}#section3 {background-color: lightcoral;}/* Hedeflenen bölge aktifken */:target {font-weight: bold;}Yukarıdaki CSS stilinde, hedeflenen bölgeye farklı arkaplan renkleri atanırken, :target pseudo sınıfı ile hedeflenen bölgenin yazı tipi kalınlaştırılmıştır. #section1, #section2 ve #section3, menü öğelerine verilen id'lerdir.İşte bu kadar! Artık Target pseudo sınıfına dair bilgi sahibi oldunuz. Kullanmaya başlamadan önce diğer pseudo sınıflar hakkında bilgi edinmek, özellikle CSS kodunuzda belirli bir stil sorunu yaşarsanız yararlıdır.