Sahte Eleman Seçicileri

Sahte eleman seçicileriyle elemanların öncesi, sonrası ya da bir kısmı seçilebirlir. Bu seçiciler :: şeklinde başlarlar.


::after

Bu şekilde oluşturulan seçicilerle bir elemanın sonrası seçilmiş olur. Belli bir elemandan sonra içerik eklemede kullanılır.


::before

Bu şekilde oluşturulan seçicilerle bir elemanın öncesi seçilmiş olur. Belli bir elemandan önce içerik eklemede kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sahte Eleman Seçicileri</title>
<style>
li.turkiye::after{
content:" - Yurtiçi";
color:red;
}
h1::before{
content:"***";
color:blue;
}
</style>
</head>
<body>
    <h1>Tatil Yerleri</h1>
        <ul>
            <li>Barselona</li>
            <li class="turkiye">Antalya</li>
            <li>Atina</li>
            <li>Venedik</li>
            <li class="turkiye">İzmir</li>
        </ul>
</body>
</html>

Yukarıdaki örnekte başlıkların başına *** eklenmesi ve bu içeriğin mavi olması, "turkiye" diye sınıflandırılan liste maddelerinden sonra da " - Yurtiçi" ibaresinin eklenmesi ve bu içeriğin renginin kırmızı olması gerektiğine dair bir biçimlendirme yapılmıştır.


::first-line

Bu seçici bir elemanın içeriğinin ilk satırını seçmeye yarar.


::first-letter

Bu seçici bir elemanın içeriğinin ilk harfini seçmeye yarar.


::selection

Bu seçici bir elemanın içeriğinin kullanıcı tarafından seçilen kısmını seçmeye yarar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sahte Eleman Seçicileri</title>
<style>
p::first-line{
background-color:lime;
}
h1::first-letter{
color:blue;
}
::selection{
background-color:gray;
}
</style>
</head>
<body>
    <div>
        <h1>Örnek Başlık</h1>
        <p>Üstteki başlığın ilk harfi mavi olacaktır. Bu paragrafın 
                 ilk satırının da arkaplan rengi biçimlendirilerek 
                 yeşil yapılmıştır. Kullanıcı tarafından seçilecek
                 herhangi bir yazının arkaplan rengi ise gri olacaktır.
                 Eğer bu paragraf tarayıcınızda tek satır olarak
                 görüntüleniyorsa pencereyi küçülterek daha fazla satıra
                 yayılmasını sağlayabilirsiniz. Böylece paragrafın sadece ilk
                 satırının biçimlendirildiği görülebilir.
       </p>
    </div>
</body>
</html>


Mozilla Firefox alternatif bir versiyon olan ::-moz-selection seçicisini desteklemektedir.