CSS Pseudo Elements Seçicler (Sözde Öğe Seçicileri)

CSS pseudo elements seçiciler bir öğenin belirli bir bölümüne stil vermek için kullanılmaktadır.
p::pseudo-element{} şeklinde kullanımı mevcuttur.

Önemli : pseudo-element kullanımında :: şeklinde iki tane iki nokta işareti ile kullanılması gerekir.
W3C ::pseudo-element ile :pseudo-class kullanımını biririnden ayırmak için bu kullanım şeklini tasalamıştır.

Pseudo Element Seçiciler

::after , ::before pseudo-element

::before ve ::after pseudo elementler ile birçok iş ve tasarım ortaya çıkarabilirsiniz.
::after ve ::before mantığını anladıktan sonra neler yapabileceğiniz tamamen sizin hayal gücünüze kalmıştır.

::after, ::before elementini kullanabilmek için content:""; css kodunu mutklaka yazmanız gerekmektedir.

::after elemanı eğer position:absolute; olarak ayarlanmadı ise HTML öğesinin sonundan yani bittiği yerden başlayacak olan eleman olacaktır.
::before elemanı ise HTML öğesinin başından başlayacak olan eleman olacaktır.

Aşağıdaki öğede ::after elementi p öğesinin sonunda ve ::before elemanı da p öğesinin başında yer almaktadır.

<p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aliquam?</p>
                        

p.main-text::before{
    content:"Before Element";
    display:inline-block;
    background-color:red;
    color:#fff;
    margin: 0 10px;
    padding:5px 20px;
}
p.main-text::after{
    content:"After Element";
    display:inline-block;
    background-color:red;
    color:#fff;
    margin: 0 10px;
    padding:5px 20px;
}
                        

::first-line

::first-line sözde (pseudo) seçici bir HTML öğesinin ilk yani en üst satırının stillendirilmesi için kullanılmaktadır. div, p, h1, section, header gibi tüm HTML öğerleri için kullanılabilir.

Aşağıdaki örnekte ::first-line seçici ile p öğesinin ilk satırını krmızı arka planda beyaz yazı rengi ile stillendirelim.

 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos underepellat
quis itaque, dolore minus suscipit magnam fugit nemo sit quidem, iure ab inventore quo
reprehenderit aliquid aut! Laudantium incidunt ipsum hic amet recusandae molestiae inventore
velit maxime, voluptatum repellendus fugit iure quibusdam nostrum exercitationem, eum vel
ex, quisquam assumenda.</p>
                        

p:first-line{
    background-color:red;
    color:#fff;
    font-size:20px;
    padding:10px;
}
                        

::first-letter

::first-letter Bir HTML öğesinin içeriğindeki ilk metindeki ilk harfi seçmek için kullanılmaktadır.
Genellikle p etiketi için kullanılan bu özellik h1, code, span, ul, header, div gibi birçok HTML öğesi için de kullanılabilir.
İhtiyacınıza göre uygun şekillerde ::first-letter pseudo seçiciyi kullanabilirsiniz.

Aşağıdaki örenekte p öğesinin ilk harfini stillendirelim.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Alias, eos commodi odit porro sapiente asperiores error nihil assumenda totam dolores.</p>
                        

p::first-letter {
    font-size: 40px;
    color: red;
}
                        

::selection Pseudo Seçici

::selection sözde seçicisi kullanıcın mouse ile bir alanı seçtiğinde arka plan rengini ve yazı rengini stillendirmenizi sağlayan css seçicisidir. ::selection şeklinde uygulayarak tüm HTML sayfasında aynı stilin görünmesini sağlayabilirsiniz.

Aşağıdaki örnekte ::selection seçici özelliği ile div içerisindeki p elemanının seçildiğinde yazı rengini sarı ve arka plan rengini de siyah yapalım.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto officiis,
repellendus id
eaque quam corporis earum quod corrupti, recusandae adipisci ducimus numquam obcaecati.
Iure alias ipsam sequi labore fuga deleniti!</p>
</div>
<p>Div içersinde olmayan P Öğesi </p>    
                        

div p::selection {
    background-color: black;
    color: yellow;
}