Son zamanlarda gördüğüm ve unutmamam gerektiğini düşündüğüm 2 CSS seçicisini hemen yazmalıyım dedim. Yazmadığım veya örnek yapmadığım zaman bir süre sonra aklımdan çıkıyor :)

İlk önce :first-letter ile başlayalım.

CSS :first-letter Seçicisi

:first-letter birçok dergi ve gazetede görmeye alışık olduğumuz şekilde, makalemizin ilk harfini büyük/bold/italic yapabileceğimiz bir seçicidir. 

Örnek Kullanım : 

p:first-letter {
	font-size: 26px;
	color: #D82E44;
	margin-right: 2px;
}

CSS :first-line Seçicisi

Metin alanındaki ilk satırı seçmemizi sağlar

Örnek Kullanım : 

p:first-line {
	background-color: #f5f5f5;
	padding: 3px;
	color: #ccc;
	text-decoration: underline;
}

Not : Bu seçiciler ile sadece aşağıdaki CSS özelliklerini kullanabilirsiniz.

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • float
  • clear

IE9 dahil olmak üzere kullanılan tüm modern tarayıcılar bu 2 seçiciyi de destekiyor.

Bir de şöyle yeri gelmişken first-letter ve first-line kullanarak Ülkü TAMER'in çok sevdiğim "KONUŞMA" şiiri ile küçük bir örnek yapalım.

See the Pen CSS3 First Letter & First Line by Yunus BAŞŞAHAN (@yunusbassahan) on CodePen.

 

Okuduğunuz için teşekkür ederim.