CSS Sözde Elementler ( Pseudo Elements ) Kullanımı

Element olmayan ama element gibi davranan ve seçici olarak kullanarak biçimlendirme yaptığımız seçicilere CSS sözde elementler denir.

Eğer Css seçiciler konusunu bilmiyorsanız, öncesinde o konuyu öğrenmenizi tavsiye ederiz. CSS Seçiciler Dersimize tıklayarak gidebilirsiniz.

CSS seçicilerin de kullanılan beş farklı sözde element vardır. Bu CSS sözde elementler; first-letter, first-line, before, after ve selection.

Örnek vermek gerekirse dergi ve gazetelerde yazının ilk harfinin büyük olarak yazılmasıdır.

1- CSS first-letter Sözde Element Kullanımı

Belirttiğimiz HTML elemanının ilk karakterine biçimlendirme yapmamızı sağlar.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
div::first-letter{
    font-size: 40px;
    color: red;
}
p::first-letter{
    font-size: 40px;
    color: blue;
}
</style>
</head>
<body>
    <div>HTML bir metin işaretleme dilidir.</div>
    <p> CSS bir biçimlendirme dilidir.</p>
</body>
</html>

Tarayıcıdaki Sonucu:

css sözde elementler first letter kullanımı

2- CSS first-line Sözde Element Kullanımı

Belirttiğimiz HTML elemanının ilk satırına biçimlendirme yapmamızı sağlar. Responsive özelliğe sahiptir.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line{
    font-style: italic;
    color: blue;
}
</style>
</head>
<body>
    <h4>CSS Sözde Elementler</h4>
    <p> Element olmayan ama element gibi davranan 
        ve seçici olarak kullanarak biçimlendirme 
        yaptığımız seçicilere CSS sözde elementler denir.
        CSS seçicilerinde kullanılan beş farklı sözde 
        element vardır. Örnek vermek gerekirse dergi 
        ve gazetelerde yazının ilk harfinin büyük olarak
        yazılmasıdır.
    </p>
</body>
</html>

Tarayıcıdaki Sonucu:

css sözde elementler first line kullanımı

Örnekte gördüğümüz gibi ilk satırı italik ve mavi yaptı. Burada tarayıcıyı daraltıp veya genişlettiğinizde kelime sayısı değişsede yine ilk satıra biçimlendirme uygulanır. Yani tarayıcıyı daralttığımızda alt satıra geçen kelimelere biçimlendirme uygulanmaz. Genişletildiğinde ilk satıra geçen kelimelere biçimlendirme uygulanır.

3- CSS before Sözde Element Kullanımı

Belirttiğimiz HTML elemanının öncesine içerik ekleyerek biçimlendirme yapmamızı sağlar.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
h4::before{
    content:"CSS ";
    font-style: italic;
    color: blue;
}
p::before{
    content: "0E";
    color: blue;
}
</style>
</head>
<body>
    <h4>Sözde Elementler</h4>
    <p>Telefon:02120000000</p>
</body>
</html>

Tarayıcıdaki Sonucu:

Yukarıda gördüğümüz gibi istediğimiz etiketin öncesine karakter ekleyip biçimlendire biliyoruz. “p” etiketine eklediğimiz sembolü unicode hexadecimal kodu ile ekledik.

4- CSS after Sözde Element Kullanımı

Belirttiğimiz HTML elemanının sonrasına içerik ekleyerek biçimlendirme yapmamızı sağlar.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
h4::after{
    content:"Durumu ";
    font-style: italic;
    color:red;
}
p.yagmur::after{
    content: "02 ";
    color: blue;
    font-size: 16px;
}
p.gunes::after{
    content: "00 ";
    color: yellow;
    font-size: 16px;
}
p.kar::after{
    content: "03";
    color: blue;
    font-size: 16px;
}
</style>
</head>
<body>
    <h4>Hava </h4>
    <p class="yagmur">Yağmurlu</p>
    <p class="gunes">Güneşli</p>
    <p class="kar">Karlı</p>
</body>
</html>

Tarayıcıdaki Sonucu:

5- CSS selection Sözde Element Kullanımı

Belirttiğimiz HTML elemanının kullanıcı tarafından seçilen kısmına biçimlendirme yapmamızı sağlar.

NOT: Bazı CSS kodları tarayıcıların kullandığı tarayıcı motorlarının farklı olmasından dolayı önek (prefix) gerektirir. Yaptığımız örneği chrome, opera, firefox ve microsoft explorer denediğinizde bazılarının biçimlendirmeyi uygulamadığını göreceksiniz. Bütün Tarayıcıların hepsinin aynı sonucu vermesi için örnekteki gibi önek (prefix) kullanıyoruz. Eğer bu konuyu bilmiyorsanız CSS Önek (Prefix) Kullanımı dersimize bakabilirsiniz.

Örnek:

<!DOCTYPE html>
<html>
<head>
<style>
::-webkit-selection{
background-color: red;
    color: white;
}
::-moz-selection{
background-color: red;
    color: white;
}
::-o-selection{
background-color: red;
    color: white;
}
::-ms-selection{
background-color: red;
    color: white;
}
::selection{
background-color: red;
    color: white;
}
</style>
</head>
<body>
    <h4>CSS Sözde Elementler</h4>
    <p>Element olmayan ama element gibi davranan <br>
    ve seçici olarak kullanarak biçimlendirme <br>
    yaptığımız seçicilere CSS sözde elementler denir.
    </p>
</body>
</html>

Tarayıcıdaki Sonucu:

css sözde elementler selection kullanımı

Diğer Seçiciler ile İlgili Derlerimiz

Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
Element Seçici (Element), seçtiğimiz Html Elementini seçer. Yani seçmek istediğimiz elementi yazarız ve seçmiş oluruz.Örneğin <h1> elementini seçmek için “h1” yazmak gibi.
ID Seçici (#ID), Html elementine yazdığımız ID ile seçeriz. Elementlerin “id” attribute değerine bir isim veririz ve o isimi CSS de kullanırız.
Class Seçici (.class), Html elementine yazdığımız class ile seçeriz. Elementlerin “class” attribute değerine bir isim veririz ve o isimi CSS de kullanırız. Birden fazla elemente aynı class ı verebiliriz.
Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
Genel Kardeş (Sibling) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
Çoklu (Multiple) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
CSS Sözde Sınıf (Pseudo Class) Seçiciler, sınıf olmayıp sınıf gibi davranan ve seçim yapmamızı sağlayan yapılardır.

Başka bir yazımızda görüşmek dileğiyle…

Diğer Seçiciler ile İlgili Derlerimiz

Related

Leave a Reply