Bağlantıda sorun var !!! CSS first-child seçicisi
CSS first-child seçicisi facebook paylaş CSS first-child seçicisi twitter paylaş CSS first-child seçicisi google plus paylaş CSS first-child seçicisi linkedin paylaş

CSS first-child seçicisi


Örnek - 1 -

Bu örnekte birçok <p> kodu arasında ilk gördüğümüz <p>...</p> koduna müdahale edeceğiz. Tabiki <p>...</p> kodu bir örnektir. Neye müdahale edeceğiniz sizin hayal gücünüze kalmış. Fakat emin olunki bu özellikle birlikte birçok soruna çözüm bulucaksınız. Hemen örnek kodlara geçelim.

Kod:

<style type="text/css">
p:first-child
{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

Screenshot:

I am a strong man. I am a strong man.
I am a strong man. I am a strong man.

Gördüğünüz gibi sadece birinci satırın tamamını bu kod ile değiştirdik.



Örnek - 2 -

2. Örnekte de <p>...</p> kodu kullnılmış satırlarda ki ilk <em>...</em> koduna müdahale edeceğiz.

Kod:

<style type="text/css">
p > em:first-child
{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

Screenshot

I am a strong man. I am a strong man.
I am a strong man. I am a strong man.

Gördüğünüz gibi her iki satırda da ilk <em>...</em> koduna müdahale de bulunduk. p > em:first-child buradaki ' > ' işaretini tam tersine yaparsanız son <em>...</em> kodlarına müdahale etmiş olursunuz.

Örnek - 3 -

Bu örnekte de ilk satırdaki <em>...</em> kodlarına müdahale edeceğiz.

Kod:

<style type="text/css">
p:first-child em
{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

Screenshot

I am a strong man. I am a strong man.
I am a strong man. I am a strong man.

En çok kullanılan 3. örnekde ki kullanımdır.Umarım işinize yarar.

Kolay gelsin...


[ YORUM YAZ ] [ YAZDIR ]
Anahtar kelimeler: 

Yazan: Orhanhanhan
Yorum: Bu kadar uzun bir süre aramamdan sonra bulduğum için mutluyum. Bari bi teşekkür ediyim dedim :) TEŞEKKÜRLER
Yazan: Haroken
Yorum: Arkadaşım hiçbir türkçe sitede bulamadım CSS in bu özelliğini. Gerçekten teşekkürler. Yabancı dili olmayan arkadaşlar için iyi olmuş bu olay.
Yazan: Aybar DUMLU
Yorum: Değişik bir renk seçmişsin okumakta zorlandım ne yalan söyliyeyim :) Bir şey değil arkadaşlar devamı gelecek. Kolay gelsin