Psevdorazredi in psevdoelementi v CSS

Psevdorazredi in psevdoelementi omogočajo, da v CSS izberemo element v posebnem stanju ali pa poseben del elementa. Tako lahko določimo slog povezave, ko je nad njo kazalec, slog polja, ko je v fokusu, ali pa posebej oblikujemo prvo črko odstavka.

Psevdorazredi se zapisujejo z enim dvopičjem, psevdoelementi pa v sodobnem CSS praviloma z dvojnim dvopičjem. Pri nekaterih starejših psevdoelementih se zaradi združljivosti še vedno pojavlja tudi starejši zapis z enim dvopičjem, vendar je dvojni zapis preglednejši.

Osnovna pravila

• Psevdorazredi se zapisujejo z enim dvopičjem, na primer :hover.
• Psevdoelementi se v sodobnem CSS zapisujejo z dvojnim dvopičjem, na primer ::before.
• Psevdorazredi pogosto opisujejo stanje elementa, na primer fokus, aktivnost ali položaj med sorodnimi elementi.
• Psevdoelementi pogosto omogočajo oblikovanje dela besedila ali dodajanje dekorativne vsebine.
• Pri uporabi obeh skupin moramo paziti, ali izbiramo element kot celoto ali samo njegov poseben del.

Psevdorazredi

Psevdorazred izbere element glede na njegovo stanje, položaj ali lastnosti. Primer je :hover, ki izbere element, ko je nad njim kazalec.

Sintaksa psevdorazreda:

Pogosto uporabljeni psevdorazredi so:

Primer uporabe psevdorazreda :nth-child():

<table>
   <tr>
       <td>1</td>
       <td>1</td>
       <td>1</td>
   </tr>
   <tr>
       <td>2</td>
       <td>2</td>
       <td>2</td>
   </tr>
   <tr>
       <td>3</td>
       <td>3</td>
       <td>3</td>
   </tr>
   <tr>
       <td>4</td>
       <td>4</td>
       <td>4</td>
   </tr>
   <tr>
       <td>5</td>
       <td>5</td>
       <td>5</td>
   </tr>
</table>

table { width: 400px; border-collapse: collapse; }
td { border: 1px solid gray; height: 40px; text-align: center; }
tr:nth-child(even) td { background-color: #FCCC88; }

Fokus in dostopnost

Psevdorazredi :focus, :focus-visible in :focus-within so zelo pomembni pri obrazcih in dostopnosti. :focus izbere element, ki je trenutno v fokusu, :focus-visible pa se uporablja takrat, ko mora biti fokusni poudarek jasno viden. :focus-within izbere nadrejeni element, če je v fokusu on sam ali kateri od njegovih potomcev.

<form class="obrazec">
   <label for="ime">Ime:</label>
   <input id="ime" type="text" placeholder="Vnesi ime" />
</form>

.obrazec {
   padding: 10px;
   border: 1px solid #ccc;
}

input:focus-visible {
   outline: 3px solid orange;
   outline-offset: 2px;
}

.obrazec:focus-within {
   background-color: #FEF3D0;
}

Strukturni psevdorazredi

Strukturni psevdorazredi izbirajo elemente glede na njihov položaj med sorodnimi elementi. Sem sodijo na primer :first-child, :last-child, :first-of-type, :last-of-type, :nth-child() in :nth-of-type(). Uporabni so, kadar želimo določene elemente izbrati brez dodatnih razredov v HTML kodi.

Psevdoelementi

Psevdoelement izbere določen del elementa ali pa ustvari navidezni del vsebine, ki ga v HTML kodi ni. Tako lahko oblikujemo prvo črko, prvo vrstico ali dodamo dekorativno vsebino pred oziroma za elementom.

Sintaksa psevdoelementa:

Najpogosteje uporabljeni psevdoelementi so:

Primer uporabe psevdoelementa ::first-letter:

<div>
  <p>To je odstavek Paragraph 1 v elementu div.</p>
  <p>To je odstavek Paragraph 2 v elementu div.</p>
  <p>To je odstavek Paragraph 3 v elementu div.</p>
</div>

p::first-letter { 
   font-size: 2em;
   font-weight: bold;
}

Primer uporabe psevdoelementov ::before in ::after:

p::before { 
   content: "➜ ";
   padding-right: 6px; 
}
p::after {
   content: " Pregledano!";
   color: red;
   font-style: italic;
}

Primerjava

Priporočila

• Za stanje elementa uporabi psevdorazred, za del elementa pa psevdoelement.
• Pri interaktivnih elementih ohrani jasno viden fokus.
• Strukturne psevdorazrede uporabi takrat, ko želiš izbirati elemente po položaju brez dodatnih razredov.
• ::before in ::after uporabljaj predvsem za dekorativno vsebino.
• Pri psevdoelementih v sodobni kodi uporabljaj zapis z dvojnim dvopičjem.

Pogoste napake

• Zamenjevanje psevdorazredov in psevdoelementov.
• Odstranjevanje fokusnega obrisa brez ustrezne nadomestne rešitve.
• Napačno razumevanje razlike med :nth-child() in :nth-of-type().
• Uporaba ::before in ::after za vsebino, ki bi morala biti del HTML dokumenta.