CSS3 - Pseudo kalse (Pseudo-classes)


Šta je pseudo-klasa?

CSS pseudo-klase omogućavaju vam oblikovanje dinamičkih stanja elementa kao što su: hover, active i focus stanje, kao i elementi koji postoje u stablu dokumenata, ali ih nije moguće ciljati upotrebom drugih selektora bez dodavanja bilo kog ID-a ili klase (class) za njih, na primjer, ciljajući prvi ili zadnji podređeni element. Pseudo-klasa započinje dvotačkom (:). Njegova sintaksa se može napisati kao:

selector:pseudo-class { property: value; }

Sljedeći dio opisuje najčešće korištene pseudo-klase.



Usidrene pseudo-klase (Anchor Pseudo-classes)

Korištenje sidrenih pseudo-klasa veze se mogu prikazati na različite načine. Ove pseudo-klase omogućavaju vam oblikovanje ne posjećenih veza drugačije od posjećenih. Najčešća tehnika oblikovanja je uklanjanje podvučene linije s posjećenih veza.

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer usidrnih pseudo klasa (Pseudo-classes)</title>
<style> 
    a:link {
        color: blue;
    }
    a:visited {
        text-decoration: none;
    }
</style>
</head>
<body>        
    <p>Posjeti naš sajt: <a href="https://www.ittutorijali.net" target="_blank">www.ittutorijali.net</a></p>
</body>
</html>

Neke pseudo-klase sidra su dinamične - primjenjuju se kao rezultat korisničke interakcije s dokumentom, poput hover ili focus itd.

a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer dinamičkog sidara pseudo klasa (Pseudo-classes)</title>
<style> 
    a:link {
        color: blue;
    }
    a:visited {
        text-decoration: none;
    }
    a:hover {
        color: red;
    }
    a:active {
        color: gray;
    }
    a:focus {
        color: yellow;
    }
</style>
</head>
<body>        
    <p>Posjeti naš sajt <a href="https://www.ittutorijali.net" target="_blank">www.ittutorijali.net</a></p>
</body>
</html>

Ove pseudo-klase mijenjaju način na koji se veze generišu kao odgovor na korisničke akcije.

  • :hover - se primjenjuje kada korisnik postavi kursor na element, ali ga ne odabere.
  • :active - se primjenjuje kada se element aktivira ili klikne na njega.
  • :focus - se primjenjuje kada element ima fokus na tastaturi.


Pseudo-klasa prvog djeteta (:first-child Pseudo-class)

Pseudo-klasa :first-child podudara se s elementom koji je prvi podređeni element nekog drugog elementa. Selektor ol li:first-child u sljedećem primjeru bira prvu stavku određene liste i uklanja gornju ivicu iz nje.

ol li:first-child {
    border-top: none;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS :first-child Pseudo-class</title>
<style>
    ol{
        padding: 0;
        list-style: none;          
    }
    ol li{
        padding: 10px 0;
        border-top: 1px solid #000000;
    }
    li:first-child {
        border-top: none;
    }
</style>
</head>
<body>
    <h1>Jednostavna određena lista</h1>
    <ol>
        <li>Banja Luka</li>
        <li>Beograd</li>
        <li>Sarajevo</li>
    </ol>
</body>
</html>


Pseudo-klasa posljednjeg djeteta (:last-child Pseudo-class)

Pseudo-klasa :last-child podudara se s elementom koji je zadnji podređeni element nekog drugog elementa. Selektor ul li:last-child u sljedećem primjeru odabire posljednju stavku neodrđene liste i uklanja desnu granicu s nje.

ul li:last-child {
    border-right: none;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS :first-child Pseudo-class</title>
<style>
    ul{
        padding: 0;
        list-style: none;          
    }
    ul li{
        display: inline;
        padding: 0 20px;
        border-right: 1px solid #000000;
    }
    li:last-child {
        border-right: none;
    }
</style>
</head>
<body>
    <h1>Jednostavan Navigation Bar</h1>
    <ul>
        <li>Početna</li>
        <li>O nama</li>
        <li>Informacije</li>
        <li>Kontakt</li>
    </ul>
</body>
</html>


Pseudo-klasa: n-dijete (:nth-child Pseudo-class)

CSS3 uvodi novu pseudo-klasu :nth-child koja vam omogućava ciljanje jednog ili više određenih podređenih elemenata datog roditeljskog elementa. Osnovna sintaksa ovog selektora može se napisati kao :nth-child(N), gdje je N argument, koji može biti broj, ključna riječ (even ili odd) ili izraz oblika xn+y gdje su x i y su cijeli brojevi (npr. 1n, 2n, 2n + 1,…).

table tr:nth-child(2n) td {
    background: #eee;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS :nth-child Pseudo-class</title>
<style>
    table{
        margin: 30px;
        border-collapse: collapse;
    }
    table tr{
        border-bottom: 1px solid #666;
    }
    table tr th, table tr td{
        padding: 10px;
    }
    table tr:nth-child(2n) td{
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>Redni broj</th>
            <th>Ime</th>
            <th>Prezime</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Milos</td>
            <td>Mihaljica</td>
            <td>milosmihaljica@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Petar</td>
            <td>Petrovic</td>
            <td>petarpetrovic@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Maja</td>
            <td>Filipović</td>
            <td>majafilipovic@mail.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Huso</td>
            <td>Husić</td>
            <td>husohusic@mail.com</td>
        </tr>
    </table>
</body>
</html>

Pravila stila u gornjem primjeru jednostavno ističu zamjenski red tabele, bez dodavanja bilo kakvih ID-a ili klasa u elemente <table>.



Pseudo-klasa :lang (:lang Pseudo-class)

Pseudo-klasa jezika :lang omogućava konstrukciju selektora na osnovu postavke jezika za određene oznake. Pseudo-klasa :lang u sljedećem primjeru definiše navodnike za elemente <q> kojima je izričito data vrijednost jezika no.

q:lang(no) {
    quotes: "~" "~";
}
/* HTML code snippet */
<p>Neki tekst <q lang="no">Citat u paragrafu</q> Neki tekst.</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS :lang Pseudo-class</title>
<style>
    q:lang(no) {
        quotes:"~" "~";
    }
</style>
</head>
<body>
    <p>Neki tekst <q lang="no">Citat u paragrafu</q> Neki tekst.</p>
</body>
</html>


Pseudo-klase i CSS klase (Pseudo-classes and CSS Classes)

Pseudo-klase se mogu kombinovati sa CSS klasama. Veza class="red", u sljedećem primjeru biće prikazana crvenom bojom.

a.red:link {    /* pravila stila */
    color: #ff0000;
}
<a class="red" href="#">Click me</a>    /* HTML code snippet */
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer korištenja CSS Pseudo-classes sa selektorima</title>
<style>
    a.red:link {
    color: #ff0000;
  }
</style>
</head>
<body>
    <p>
      <a href="#">Klikni</a>
        <br>
        <a href="#" class="red">Klikni</a> 
    </p>
</body>
</html>