Css Pseudo Selectors - Css Dersleri

[VexraDev]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

Pseudo Selectors' lar 2 grup altında ele alınıyor.

• Pseudo Classes
• Pseudo Elements

Pseudo Class Selector' ları html etiketlerinin durumunu kontrol ettikten sonra uygulayacağımız css kodları için kullanılır.

Kullanımı şu şekildedir

selector: pseudo-class {                          - ( p harfinden önce boşluk olmamalı smile oluşturmaması adına boşluk bıraktım. )
     property:value;
}

<a> etiketi için kullanabileceğimiz pseudo class selector kullanımları ;

/* henüz ziyaret edilmemiş link */
a:link {
   color: blue;
}

/* ziyaret edilmiş link */
a:visited {
   color: gray;
}

/* mouse link üzerindeyken */
a:hover {
   color: yellow; 
}

/* linke tıklanma anı */
a:active {
   color: red;
}

Yukarıda görüldüğü gibi tanımlanan bir link için kullanabileceğimiz bazı pseudo class selector 'ları vardır. Tabi ki bu selector'lar sadece <a> etiketi için değildir. Örneğin bir div etiketi için hover olayını gerçekleştirebiliriz ;

div:hover {
   background-color: blue;
}

div' in üzerine mouse ile geldiğimiz an da div' in arkaplanı mavi olur.


Ya da bir div içerisindeki bir p etiketini istediğimiz zaman görünür hale getirebiliriz ;

<div> 
    p etiketini görmek için mouse ile üzerine gel
   <p>Paragraf</p>
</div>




<style>
   p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}
</style>

** display : none; => ulaştığımız bir etiketin görünmez olmasını sağlar. Örneğimizde <p> etiketi içindeki "Paragraf" yazısı görünmez olur. Ancak pseudo class selector' ını kullanarak <div> etiketi üzerine mouse ile geldiğimiz anda yani <div> etiketi için hover olayı gerçekleştiği anda <p> etiketinin display özelliğini block yaparak görünür hale getirmiş oluruz.


** first-child ve last-child pseudo class selector kullanımı: Bir kapsam içindeki ilk alt eleman ya da son alt eleman seçiminde kullanılır.

p:first-child {
    color: blue;
}

Buradaki örnekte her hangi bir kapsam içindeki ilk <p> etiketi seçilir.

p i:first-child {
    color: blue;
}

Buradaki örnekte tüm <p> etiketleri içindeki ilk <i> etiketi seçilir.


Pseudo Element Selector' ları ise bir etiketinin her hangi bir parçasını seçmek istediğimizde kullanırız. Pseudo class selector' larından farklı olarak "::" sembolü kullanılır.


Kullanımı şu şekildedir ;

selector: pseudo-element {                     - ( p harfinden önce boşluk olmamalı smile oluşturmaması adına boşluk bıraktım. )
    property:value;
}

Örneğin; <p> etiketinin kapsamındaki yazı içinde ilk satırı seçmek istersek ::first-line özelliğini kullanabiliriz.

p::first-line {
    color: red;
}

Ya da <p> etiketinin kapsamındaki yazı içinde ilk harfi seçmek istersek ::first-letter özelliğini kullanabiliriz.

p::first-letter {
    color: green;
    font-size: xx-large;
}

Bu örneğimizde paragrafın ilk harfi yeşil ve büyük font olarak karşımıza gelir.


Sıklıkla kullandığımız ::after ve ::before pseudo element selector' ları ise bir etiketten hemen önce ya da sonra bir içerik eklemek istediğimizde kullanılır.

p::after { 
    content: " - eklenecek yazı";
}

** <p> etiketinin bittiği yerden itibaren content içindeki yazı etiket sonuna eklenir. Aynı şekilde <p> etiketinden hemen önce eklemek istersek :before pseudo element selector' ını kullanabiliriz.


** Peki ::after ve ::before pseudo element selector' ları sadece bu amaç içinmi kullanırız ?

.clearfix::after {
  content: "";
  display: block;
  clear: both; 
}

şeklinde sıklıkla kullandığımız css kod parçasını float özelliğini kullandıktan sonra clear işlemi yapmak için kullanıyoruz.

Henüz floating kavramını öğrenmedik ancak buradaki kullanıma dikkat etmenizi istiyorum. Her hangi bir etiket oluşturup bu etikete clear özelliğini uygulayabilirdik ancak bunun yerine .clearfix isminde bir class oluşturup hemen arkasına float 'i temizlemek için css kodları ekledik. Yani ekstra bir etiket eklemek zorunda kalmadık. Bu class' in eklendiği etiketin hemen ardından görünmez bir alan oluşturup o alana bir değerleri atamış oluyoruz.