4 beğenilme 0 beğenilmeme
25 gösterim

CSS pseudo class element kavramı nedir?

CSS pseudo class nedir? nelerlerde kullanılmaktadır ?

CSS pseudo element nedir? hangi elementler pseudo elementler hangileridir?

CSS pseudo element nelerlerde kullanılmaktadır ?

14 Temmuz Css kategorisinde esmadenizkirişçi Senior Developer (1,010 puan) paylaştı | 25 gösterim

1 cevap

0 beğenilme 0 beğenilmeme

css pseudo

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir.

Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. 

Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) 

Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.)

Pseudo sınıfına örnek:

a:visited {
    color: red;
}

Pseudo elementine örnek:

p:first-line {
    font-weight: bold;
}

Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir.

Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.

a.disariyalinkller:link,
a.disariyalinkller:visited {
    color: maroon;
}

Aynı şekilde id seçicileri ile birlikte de kullanılabilirler.

a#altkisim:link {
    font-weight: bold;
}

Pseudo sınıflarını da ikiye ayıra biliriz. 

Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları

Link Pseudo sınıfı

Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited :link -Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır.

Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular. 

:visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.

a {
    color: blue;
}

a:visited {
    color: red;
}

Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.

Tarayıcı Uyumu Firefox Chrome Safari Opera İnternet Explorer

Dinamik Pseudo Sınıfları

Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir.

Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus:active ve :hover

Not Pseudo sınıflarında sıralama önemlidir.

Genel kullanımda “link-visited-hover-active,”sıralaması yapılmalıdır. Tüm sınıflar içinse “link-visited- focus-hover-active.” sıralaması yapılmalıdır.

:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır .

Örn: input alanına içerik girerken :active - Aktif olan elemente stil atamak için kullanılır. 

:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için ,

Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için Linkler için genel kullanım :

a:link {
    color: navy;
}

a:visited {
    color: gray;
}

a:hover {
    color: red;
}

a:active {
    color: yellow;
}

:focus için bir örnek verecek olursak

input:focus {
    background: silver;
    font-weight: bold;
}

Tarayıcı Uyumu Firefox Chrome Safari Opera İnternet Explorer

İlk Çocuk Elementi seçmek

Diğer bir pseudo sınıfımız :first-child‘dır. first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.

p:first-child {
    font-weight: bold;
}

li:first-child {
    color:#f00;
}

HTML;

<div>
    <p>Bu paragraf ilk çocuk elementidir ve sonuç olarak kalın olacaktır</p>
    <ul>
        <li>Bu liste ilk çocuk elementidir ve font rengi kırmızı olacak</li>
        <li>Bu <strong>çocuk element </strong>değil</li>
        <li>Bu da değil</li>
    </ul>
    <p>Bu pragraf <em>bir</em> çocuk element değil.</p>
</div>

Tarayıcı Uyumu Firefox Chrome Safari Opera İnternet Explorer

:lang Pseudo Sınıfı

Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar. Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.

<html>
<head>
<title>lang test</title>
<style type="text/css">
p:lang(fr) {
    color: red;
}
</style>
</head><body>
<p lang="fr">Bonjour le monde!</p>
</body>
</html>

Tarayıcı Uyumu Firefox Chrome Safari Opera İnternet Explorer 8+

Pseudo Sınıflarını birleştirmek

CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek:

a:link:hover {
    color: red;
}

a:visited:hover{
    color: pink;
}

Sıralama önemli değildir.

Tarayıcı Uyumu Firefox Chrome Safari Opera İnternet Explorer 8+

Pseudo Element Seçicileri

Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letterfirst-linebefore ve after

first-letter (ilk harf)

Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :

h1:first-letter {
    font-size:200%;
}
<h1>Bu büyük bir başlık</h1>

Tarayıcı Uyumu Firefox Chrome Safari Opera İnternet Explorer 7+

first-line (ilk satır)

Bir metnin ilk elementine stil atamak için kullanılır.

Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.

p:first-line {
    color: red;
}

Tarayıcı Uyumu Firefox Chrome Safari Opera İnternet Explorer

before ve after elementleri

Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır. Notlarımızın başına otomatik oalrak Not yazmak için :

p.not:before {
    content: "Not."
}

kodu yeterlidir.

Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek:

body:after {
    content: " Bitti.";
}

yeterli olacaktır.

14 Temmuz serhat.öcal Uzman Coder (13,350 puan) cevapladı
uzmancoder.com'a Hoşgeldiniz. Sitemiz 24.06.2017 tarihinde kurulan bir soru-cevap platformudur.

Siz de aklınıza takılan soruları sorabilir veya diğer sorulara cevaplar yazabilirsiniz.

BU AY EN AKTİF ÜYELER

    96 soru

    81 cevap

    19 yorum

    122 üye

    ×

    Bizi Takip Edin!

    Bumerang - Yazarkafe

    comodo ssl




    96 soru
    81 cevap
    19 yorum
    122 üye