Kodlama / Css

Tarih11 Eylül 2017, 22:16
Yorumlar0 Yorum

CSS first Seçicileri

CSS'in bizlere sunduklarından olan first seçicileri, alt başlığı olarak dörde ayrılıyor; ::first-letter, ::first-line, :first-child, :first-of-type. Bu makalemizde bu dört seçiciyi inceleyeceğiz.

 

::first-letter

Herhangi bir metin içerisindeki ilk harfi ele almak istediğimizde kullanabiliriz. Genellikle ilk harfleri gazete yazılarındaki gibi büyük harfe çevirmek istiyoruz. Burada bu işlemi kolaylıkla yapabiliriz. Kullanımına örnek vermek gerekirse;

HTML

<p>Buraya sıradan bir metin girebilirsiniz.</p>

CSS

p::first-letter {
	color: red;
	font-weight: bold;
	font-size: 24px;
}

ve SONUÇ

::first-line

Bu seçicimiz yalnızca block seviyesi elemanlarda çalışmaktadır. Yani genel itibari ile font öğeleri, metin öğeleri ve arkaplan öğeleri üzerinde çalışır. İlk satırı ele alarak işlem yapar. Örneğimizi inceleyelim;

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis massa, imperdiet in venenatis vitae, consectetur ut massa. Curabitur efficitur efficitur nisl, ac pretium tellus ultrices sed. Nunc vel consectetur enim. Curabitur volutpat dui a dui ornare cursus. In porttitor lectus quis mauris sodales pulvinar. Curabitur pharetra placerat molestie. Maecenas nisi mi, varius quis finibus vitae, feugiat non lacus.</p>

CSS

p::first-line {
	color: red;
	font-weight: bold;
}

ve SONUÇ

:first-child

Herhangi bir liste veya aynı sıralı giden bir div içindeki öğelerden ilk olanı seçmek için kullanılan seçicidir. Bu seçicinin tam tersi olarak :last-child kullanılabilir. Şimdi biz first-child için örneğimizi inceleyelim;

HTML

<div id="menu">
	<li>Ana Sayfa</li>
	<li>Hakkımızda</li>
	<li>İletişim</li>
	<li>Son Yazılar</li>
	<li>Son Yorumlar</li>
</div>

CSS

#menu li:first-child {
	color: red;
	font-weight: bold;
}

ve SONUÇ

:first-of-type

Herhangi bir alan içerisinde seçilen etiketten ilkini seçer. Yine last-of-type olarak bir kullanımı mevcuttur. Genelde haber sitelerinde bu tarza rastlayabilirsiniz. Hızlıca örneğimizi inceleyelim;

HTML

<div id="icerik">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed gravida magna. Sed vulputate porta auctor. Nam purus risus, viverra in lacus quis, sodales vestibulum erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eget scelerisque nisi, vel ullamcorper tortor. Nam et ultricies nulla. Praesent a sem vitae mauris tristique porttitor a id magna. Nunc interdum nulla nec urna gravida, sed rutrum neque cursus. Phasellus efficitur iaculis metus, eu lacinia tellus pulvinar sit amet. Praesent vitae rhoncus purus. Etiam vitae diam in sapien molestie dictum id non risus.</p>

	<p>Pellentesque feugiat non velit ac auctor. Praesent a velit et velit accumsan scelerisque. Phasellus accumsan diam id volutpat tempus. Phasellus mattis libero in nibh efficitur, at luctus justo sodales. In consequat suscipit ipsum. Duis blandit neque id arcu imperdiet, in pharetra sem tempus. Aliquam erat volutpat. Curabitur varius euismod erat, sed consequat mi lacinia accumsan. Nulla id tincidunt massa. Integer fermentum, ante eget luctus suscipit, odio massa iaculis nunc, lobortis vestibulum metus libero id libero. Vivamus scelerisque tempus nibh in consequat. Morbi cursus dolor a dui rhoncus vestibulum. Suspendisse placerat massa id ipsum euismod eleifend. Donec consectetur tristique leo, vitae sodales turpis eleifend sed. Pellentesque ac sem nunc. Donec fringilla a quam in feugiat.</p>

	<p>Fusce blandit, quam dictum rutrum scelerisque, sapien odio vulputate diam, in blandit neque erat nec augue. Aenean commodo volutpat mi ac ultrices. Etiam vulputate vitae libero ac imperdiet. Praesent placerat pretium dolor congue semper. Ut lacus lectus, elementum at venenatis in, cursus interdum purus. Maecenas volutpat, lectus non congue condimentum, mi augue malesuada erat, nec consequat nisl turpis id massa. Donec vel eros a velit rutrum euismod a ac est. Curabitur posuere convallis mauris pretium feugiat.</p>
</div>

CSS

#icerik p:first-of-type {
	font-weight: bold;
	font-size: 24px;
}
#icerik p:last-of-type {
	font-size: 12px;
}

ve SONUÇ

Yorumlar
Bu konu hakkında henüz kimse fikrini belirtmemiş. Siz fikrinizi belirtmek ister misiniz?
Konu hakkında düşüncelerinizi iletin