FrontEnd Developer Road Map

FrontEnd Developer RoadMap – CSS3 Tutorial 19 Pseudo Elements Selector

Merhabalar, bu yazımda Pseudo Element selector’e bakacağız.

Pseudo özel seçicilerdir. Örneklerle beraber daha anlaşılır olacaktır.

Sözde elementler aşağıdaki gibidir. Kullanımı ::pseudoElement şeklindedir.

SelectorExampleExample description
::afterp::afterInsert something after the content of each <p> element
::beforep::beforeInsert something before the content of each <p> element
::first-letterp::first-letterSelects the first letter of each <p> element
::first-linep::first-lineSelects the first line of each <p> element
::marker::markerSelects the markers of list items
::selectionp::selectionSelects the portion of an element that is selected by a user

Html içinde bir elemanın bir parçasını seçmek istersek Pseudo elementleri kullanılır.

Html kodlarımız aşağıdaki gibi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
    </style>
</head>
<body>
 
    <h1>Pseudo Selector</h1>
 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto reiciendis accusantium quaerat! Nobis a corporis iusto sequi doloribus excepturi nostrum illum, eius voluptate asperiores voluptatum repellendus. Numquam soluta fugit ut sequi et sapiente veritatis distinctio sunt reiciendis facere magnam totam est quod consequuntur itaque nesciunt possimus, velit earum unde veniam eum delectus consectetur. Totam iste eius ea error architecto veritatis, eos at laboriosam commodi enim harum tempora delectus eveniet repellendus consequatur! Sed illo ex itaque qui, eaque sunt tenetur necessitatibus libero inventore sint odio reprehenderit sit, cupiditate tempora. Sit cumque, eaque culpa nemo fugiat delectus officia itaque laboriosam. Modi placeat sit dolore veritatis sunt perspiciatis debitis optio pariatur nemo ullam? Perspiciatis amet natus culpa aperiam in eveniet quis rerum, aut dolore aliquam maxime nihil doloremque omnis facilis sapiente ut. Aut accusamus minus possimus ex esse explicabo, laudantium blanditiis in! Quasi reprehenderit aut a velit voluptate ratione consequatur. Maxime minus perferendis saepe eius rem? Saepe non eum cumque, mollitia eaque consectetur modi adipisci porro neque. </p>
 
    
    
</body>
</html>

Görüntümüz bu

1 Bir paragrafın ilk satırına CSS uygulamak isteyelim

p::first-line{ 
     CSS Kodları
}

Bu kullanım p etiketlerinin ilk satırına CSS eklememize olanak tanır.

p::first-line{
            font-size: 30px;
            color: red;
        }

Burada güzel olan, siz tarayıcınızın genişliği ile oynayıp ilk satırdaki yer alan değer değişse de otomatik olarak ilk satıra CSS uygulanır.

2 İlk harfi seçip CSS uygulayalım

p::first-letter{
            font-size: 45px;
            font-weight: bold;
        }

3 Bir etiketten önce bir şey eklenmesini ya da uygulanmasını istersek ::before değeri kullanılır.

4 Bir etiketten sonra bir şey eklenmesini ya da uygulanmasını istersek ::after değeri kullanılır.

p::before{
    content: "Test";
    color: rgb(138, 243, 19);
}

p::after{
    content: "Test";
    color: rgb(138, 243, 19);
}

Burada p etiketine sahip değerin önüne Test yazılır.

Bir alttaki kodlama ile de sonuna Test yazılması sağlanır.

Burada bu özelliğin kullanımı tamamen hayal gücünüze kalmış durumdadır.

Pseudo Class Selector ile devam ediyor olacağız.

Bir sonraki bölümde görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

3 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

4 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago