Sözde sınıflar nelerdir?
Bir sözde-sınıfı bir elemanın özel bir durumu tanımlamak için kullanılır.
Örneğin, için kullanılabilir:
- bir öğe Stil üzerine geldiğinde bir kullanıcı fareyle
- farklı Stil ziyaret etti ve ziyaret edilmemiş linkler
- o odağı aldığında bir öğe Stil
Fare Üzeri Me
Sözdizimi
sözde sınıflar sözdizimi:
selector:pseudo-class {
property:value;
}Çapa Sözde sınıflar
Bağlantılar farklı şekillerde görüntülenebilir:
Örnek
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Kendin dene " Note: a:hover sonra gelmelidir a:link ve a:visited sırayla CSS tanımında etkili olduğu! a:active sonra gelmelidir a:hover etkili olması için CSS tanımında! Sözde sınıf adları küçük harf duyarlı değildir.
Sözde sınıflar ve CSS Sınıfları
Sözde sınıflar CSS sınıfları ile kombine edilebilir:
Eğer örnekteki bağlantının üzerine geldiğinizde, bu rengi değişir:
Üzerine gelin <div>
Kullanılmasının bir örneği :hover bir ile sözde sınıfı <div> öğesi:
CSS - :first-child Sözde sınıf
:first-child sözde sınıfı bir öğenin ilk çocuğu olan belirtilen elemanı ile eşleşir.
İlk eşleştir <p> elemanı
Aşağıdaki örnekte, selektör herhangi maçları <p> herhangi elemanın ilk çocuğu eleman:
İlk eşleştir <i> tüm eleman <p> elemanlarını
Aşağıdaki örnekte, seçici, birinci ile eşleşen <i> her eleman <p> elemanlar:
Tüm eşleştir <i> tüm ilk çocukta elemanları <p> elemanlarını
Aşağıdaki örnekte, selektör tüm maçları <i> öğeler <p> Başka bir elemanın ilk çocuğu olan elemanlar:
CSS - :lang Sözde sınıf
:lang sözde sınıfı farklı diller için özel kurallar tanımlamanızı sağlar.
Aşağıdaki örnekte, :lang için tırnak tanımlayan <q> ile elemanlarının lang="no" :
Örnek
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Kendin dene " 
Diğer Örnekler
Köprülere farklı stilleri ekleme
Bu örnek köprülere diğer stilleri eklemek gösterilmiştir.
Kullanımı :focus
Bu örnek nasıl kullanılacağını göstermektedir :focus sözde sınıfı.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»
Tüm CSS Sözde Sınıflar
| selektör | Örnek | Örnek açıklaması |
|---|---|---|
| :active | a:active | Aktif linki seçer |
| :checked | input:checked | Her kontrol seçer <input> elemanı |
| :disabled | input:disabled | Her engelli seçer <input> elemanı |
| :empty | p:empty | Her seçer <p> çocuk sahibi olmadığı elemanı |
| :enabled | input:enabled | Her etkin seçer <input> elemanı |
| :first-child | p:first-child | Her seçer <p> örüntüsü ilk çocuğudur elemanlar |
| :first-of-type | p:first-of-type | Her seçer <p> ilk elemanı <p> Kendi üst öğesi |
| :focus | input:focus | Seçer <input> odağı elemanı |
| :hover | a:hover | farenin üzerinde bağlantıları seçer |
| :in-range | input:in-range | Seçer <input> belirli bir aralıkta bir değere sahip elemanlar |
| :invalid | input:invalid | Tüm seçer <input> geçersiz değerli elemanları |
| : lang( language ) | p: lang(it) | Her seçer <p> Bir lang özellik değeri ile başlayan eleman "it" |
| :last-child | p:last-child | Her seçer <p> üst biriminin son çocuğudur elemanlar |
| :last-of-type | p:last-of-type | Her seçer <p> sonuncusu elemanı <p> Kendi üst öğesi |
| :link | a:link | Tüm edilmemiş bağlantıları seçer |
| : not(selector) | : not(p) | Bir değil her eleman seçer <p> elemanı |
| :nth- child(n) | p:nth- child(2) | Her seçer <p> üst biriminin ikinci çocuğudur elemanı |
| :nth-last- child(n) | p:nth-last- child(2) | Her seçer <p> Geçen çocuktan sayarak, üst biriminin ikinci çocuğudur elemanı |
| :nth-last-of- type(n) | p:nth-last-of- type(2) | Her seçer <p> ikinci elemanı <p> Geçen çocuktan sayarak, kendi ebeveyn eleman |
| :nth-of- type(n) | p:nth-of- type(2) | Her seçer <p> ikinci elemanı <p> onun ana unsuru |
| :only-of-type | p:only-of-type | Her seçer <p> sadece elemanı <p> Kendi üst öğesi |
| :only-child | p:only-child | Her seçer <p> üst biriminin tek çocuğu elemanı |
| :optional | input:optional | Seçer <input> hiçbir ile elementler "required" özniteliği |
| :out-of-range | input:out-of-range | Seçer <input> belirli bir aralığının dışında bir değere sahip elemanlar |
| :read-only | input:read-only | Seçer <input> a sahip elemanlar "readonly" özelliğinin belirtilmesi |
| :read-write | input:read-write | Seçer <input> hiçbir ile elementler "readonly" özniteliği |
| :required | input:required | Seçer <input> a sahip elemanlar "required" belirtilen özellik |
| :root | root | belgenin kök elemanı seçer |
| :target | #news:target | Geçerli etkin #news elemanını seçer (clicked on a URL containing that anchor name) |
| :valid | input:valid | Tüm seçer <input> geçerli bir değere sahip elemanlar |
| :visited | a:visited | tüm ziyaret edilen bağlantılar seçer |
Tüm CSS Sözde Elemanları
| selektör | Örnek | Örnek açıklaması |
|---|---|---|
| ::after | p::after | Her sonra içeriği yerleştirin <p> elemanı |
| ::before | p::before | Her önce içeriğini ekleyin <p> elemanı |
| ::first-letter | p::first-letter | Her baş harfini seçer <p> elemanı |
| ::first-line | p::first-line | Her ilk satırı seçer <p> elemanının |
| ::selection | p::selection | Bir kullanıcı tarafından seçilen bir eleman kısmını seçer |