CSS'te :link, :visited, hover, :active gibi bazı pseudo class'lar (sözde sınıf) vardır. Bugün pseudo class'lardan :focus ve :focus-withinin farkını göreceğiz. Makale sonunda iki farklı örnek bulunmakta.
CSS'te Focus Özelliği
:focus özelliği, sayfada tab tuşu ile gezdiğimizde linklerin ve form alanlarının sırasıyla üzerine gelindiğinde çalışan bir pseudo class'tır.
Google Chrome tarayıcısı, varsayılan olarak bir input'un üzerine geldiğinde, inputun etrafını bir kenarlık ile sarar.
:focus {
outline: -webkit-focus-ring-color auto 1px;
}
Varsayılan olarak gelen bu :focus özelliğini beğenmediğimden dolayı, outline kodunu kaldırıp, box-shadow ile daha hoş bir görsellik sunmak adına aşağıdaki kodu projelerime dahil etmeyi tercih ediyorum.
:focus {
box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.25);
outline: none;
}
Kişisel projem olan Turkuaz ile focus'u test etmek için Input linkinde form elemanlarının üzerine tab tuşu ile gelebilirsiniz.
CSS'te Focus Within Özelliği
:focus-within'de :focus'a benzer çalışmasına rağmen küçük bir farkı var.
Örneğin içerisinde input barındıran bir <form> etiketi düşünelim;
<form>
<input type="text" name="ad" />
<input type="text" name="soyad" />
</form>
CSS'te form:focus-within seçicine kod yazdığımızda, bu form alanının içerisindeki bir input'a :focus olunduğunda form'un CSS'ine müdahale etmemize olanak sağlıyor; yani bir nevi CSS'te parent selector (üst seçiciye ulaşmak) kullanmış oluyoruz.
form:focus-within {
background-color: #26a69a;
}
Örnek olarak bu kod form içerisindeki bir elemente :focus olunduğunda :focus-within kodu sayesinde form'un arka plan rengini turkuaz yapacaktır.
Bir başka örnek ile öğrendiklerimizi pekiştirelim.
Aşağıdaki örnekte tab menü ile menüyü gezmek isterseniz linkleri sırasıyla gezersiniz. Fakat açılır menü kodu :hover için yazılmıştır. Klavye ile siteyi gezerken açılır menüyü aktif etmek için :focus-within özelliğinden faydalanılmıştır.