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.

Exit mobile version