Ö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...
