Pseudo siniflər (Pseudo-class) ve Pseudo elementlər (Pseudo-elements)

Pseudo sinif və elementləri CSS-i dəstəkləyən veb brauzerlər tərəfindən avtomatik olaraq tanınan xüsusi sinif və elementlərdir. Bu sinif və elementlər html iyerarxiyası ilə çata bilmədiyimiz element və siniflərə çatmağımızı təmin edir. Pseudo sinifi bir elementi fərqli siniflərə bölür (məs: link elementini active, visited və s. siniflərə bölür). Pseudo elementi isə bir elementi alt qisimlərə bölür (məs: bir paraqrafın ilk hərfi, bir paraqrafın ilk sətri kimi.) Pseudo sinfinə nümunə:
a:visited { 
    color: red; 
}
Pseudo elementinə nümunə:
p:first-line { 
    font-weight: bold; 
}
Pseudo sinif və elementlər HTML class xüsusiyyəti olaraq ifadə edilməmişdir. Normal siniflər pseudo sinif və elementləri ilə istifadə edilə bilər. 
a.xeber:link, 
a.xeber:visited {
    color: maroon; 
}
Eyni formada id seçiciləri ilə birlikdə də istifadə edilə bilərlər
a#althisse:link{
    font-weight: bold; 
}
Pseudo sinifləri iki cür olur: Link Pseduo Sinifləri və Dinamik Pseudo Sinifləri
 
Link Pseudo sinifi
Təkcə linklərə tətbiq olunan iki Link Pseduo sinifi vardır. :link və :visited. :link - Ziyarət edilməmiş səhifənin linkinə stil təyin etmək üçün istifadə edilir. Ancaq bir çox veb brauzer bunu ziyarət edilmiş səhifə linklərinə də tətbiq edir. :visited - Ziyarət edilmiş səhifə linklərinə stil təyin etmək üçün istifadə edilir. 
a:link { 
    color: blue; 
}

a:visited { 
    color: red; 
}
Bunun yerinə adətən aşağıdakı kimi bir kod istifadə edilir
a { 
    color: blue;
}

a:visited { 
    color: red; 
}
Bu kodlaşdırma ilə istifadəçiyə ziyarət etdiyi səhifə linkləri fərqli rəngdə göstərilərək onları ayırd etməsi üçün məlumat verilmiş olur.
 
Dinamik Pseudo Sinifləri
Dinamik Pseudo Sinifləri səhifə görünüşünə xeyli effektlər verir. Bu siniflər adətən linklərə tətbiq olunur, ancaq bir çox istifadə sahələri də vardır. 3 dənədir :focus, :active və :hover

Qeyd: Pseudo siniflərində sıralama əhəmiyyətlidir. Ümumi istifadədə "link-visited-hover-active," sıralaması edilməlidir. Bütün siniflər üçün isə "link-visited- focus-hover-active." sıralaması edilməlidir.

:focus - Fokuslanan elementə stil təyin etmək üçün istifadə edilir. Məsələn: input sahəsinə məzmun yazarkən.
:active - Aktiv olan elementə stil təyin etmək üçün istifadə edilir.
:hover - Bir elementin üzərinə siçanın (mausun) kursoru gətirildiyində ediləcək dəyişikliklər. Məs: bir linkin üzərinə siçanı gətirəndə rəngi dəyişdirmək üçündür.
Linklər üçün ümumi istifadə
a:link { 
    color: navy; 
}

a:visited {
    color: gray; 
}

a:hover { 
    color: red; 
}

a:active { 
    color: yellow; 
}
:focus üçün bir nümunə versək 
input:focus { 
    background: silver; 
    font-weight: bold; 
}
 
İlk Uşaq Elementi seçmək
Digər bir pseudo sinifimiz :first-child-dir. first:child: İfadə edilən elementin ilk uşaq elementinə stil təyin etmək üçün istifadə edilir.
p:first-child {
    font-weight: bold;
}

li:first-child {
    color:#f00;
}
HTML-da
<div>
    <p>Bu paraqraf ilk uşaq elementidir və nəticə olaraq qalın olacaqdır</p>
    <ul>
        <li>Bu siyahı ilk uşaq elementidir və şrift rəngi qırmızı olacaqdır</li>
        <li>Bu <strong>usaq element </strong>deyil</li>
        <li>Bu da deyil</li>
    </ul>
    <p>Bu praqraf <em>bir</em> uşaq element deyil.</p>
</div>
 
:lang Pseudo Sinifi
Lang pseudo sinifi mətndəki bir elementə fərqli bir dil də yazmağımızı təmin edir. Təyin edilə biləcək dil siyahısı və istifadə ediləcək qısaltmalara ISO 639 and RFC 1776 standards-dan baxa bilərsiniz. 
<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>
 
Pseudo Siniflərini birləşdirmək
Eyni seçiciyə aid pseudo elementlərini birləşdirmək xüsusiyyəti də vardır. Məsələn ziyarət edilmiş linklərin hover xüsusiyyəti ilə ziyarət edilməmiş linklərin hover xüsusiyyətini fərqli təyin etmək istəsək
a:link:hover { 
    color: red; 
}

a:visited:hover{ 
    color: pink; 
}
Sıralamanın necə olması fərq etməz.
 
Pseudo Element Seçiciləri
Bu elementlər xəyali elementlərdir. HTML iyerarxiyası içində bu elementlər yoxdur. Əsas 4 ədəd Pseudo Element Seçicisi vardır: first-letter, first-line, before və after

first-letter (ilk hərf)
Bir blok-level elementin ilk hərfinə stil təyin etmək üçün istifadə edilir. Nümunə olaraq h1 elementinin baş hərfinin böyük olması üçün: 
h1:first-letter { 
    font-size:200%; 
}

:::html
<h1>Bu böyük bir başlıqdır</h1>
 
first-line (ilk sətir)
Bir mətnin ilk elementinə stil təyin etmək üçün istifadə edilir. Məsələn paraqraflarınızın ilk sətirlərini rəngləndirmək istəyirsinizsə
p:first-line { 
    color: red; 
}
 
before və after elementləri
Bir elementin əvvəlinə və sonrasına bir məzmun və ya xüsusiyyət əlavə etmək üçün istifadə edilir. Məsələn: Qeydlərimizin əvvəlinə avtomatik olaraq Qeyd yazmaq üçün
p.qeyd:before { 
    content: "Qeyd." 
}
kodu kifayətdir. Eyni formada paraqraflarımızın sonuna avtomatik sona çatdı yazıb nöqtə qoymaq istəsək
body:after { 
    content: " sona çatdı."; 
}
kifayətdir
CSS3