Uzun zamandan beri CSS kategorisinde yazmıyordum, bugün öğrendiğim bir pseudo seçici beni buralara attı.

Bu seçici adından da anlaşıldığı üzere HTML lang attribute'u ile çalışıyor. HTML elemanına verilen lang="" değeri ile sayfaya özel CSS tanımlaması yapmamıza olanak sağlıyor.

Üstelik IE8 üstü tüm tarayıcılar tarafından destekleniyor. Lafı fazla uzatmadan örneklerimize geçelim.

CSS

.eleman:lang(tr) {
	/* Eleman ile ilgili CSS kodlarımız */
}

HTML

<!DOCTYPE html>
<html lang="tr">
	<head>
		<meta charset="UTF-8">
		<title>CSS lang Seçicisi</title>
	</head>
	<body>

		<div class="eleman">
			
		</div>
		
	</body>
</html>

HTML lang attribute'unu sadece html etiketi için değil diğer html etiketleri için de kullanabiliriz.

Span etiketi için örnek kullanımına aşağıdan bakabilirsiniz.

<p>Burada Çince olarak <span lang="zh">開發商海豚</span> yazıyor</p>
span:lang(zh){
	background-color: red;
}

Bu etiketin yokluğunu Türkçe - İngilizce ve Yunanca olmak üzere toplam 3 dili destekleyen bir proje üzerinde çalışırken yaşamıştım. Tasarımcının seçtiği font Kiril alfabesinde çok kaba duruyordu ve Yunancaya geçtiğinde font-size ı küçültmek için ciddi zaman harcamıştım.

Bir de bonus olarak tüm dillerin kısaltmalarını içeren bir sayfa vereyim :) buraya tıklayarak dil kısaltmalarına ulaşabilirsiniz.

Okuduğunuz için teşekkürler :)