Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Psevdorazredi in psevdoelementi v CSS

Psevdorazredi in psevdoelementi omogočajo definiranje posebnega stanja elementa (npr. definiranje sloga elementa, ko je nad njim miškin kurzor, določitev lastnosti prve vrstice ali prvega znaka, itd.).

 

Psevdorazredi

Sintaksa psevdorazreda:

selektor:psevdorazred {
   lastnost: vrednost;
}

Psevdorazredi so že v naprej določeni razredi in jih ne moremo sami definirati:

Selektor Primer Opis primera
:active a:active izbere aktivno povezavo
:checked input:checked izbere vsak element input, ki ima lastnost checked
:disabled input:disabled izbere vsak element input, ki ima lastnost disabled
:empty p:empty izbere vsak element p, ki nima otroka
:enabled input:enabled izbere vsak element input, ki ima lastnost enabled
:first-child p:first-child izbere vsak element p, ki je prvi otrok njegovega starša
:first-of-type p:first-of-type izbere vsak element p, ki je prvi p element njegovega starša
:focus input:focus izbere element input, ki ima lastnost focus
:hover a:hover izbere povezavo, ko je nad njo miškin kurzor
:in-range input:in-range izbere elemente input, ki imajo vrednost v določenih mejah
:invalid input:invalid izbere vse elemente input, ki nimajo prave vrednosti
:lang(language) p:lang(si) izbere vsak element p, ki ima atribut lang nastavljen na vrednost "si"
:last-child p:last-child izbere vsak element p, ki je zadnji otrok njegovega starša
:last-of-type p:last-of-type izbere vsak element p, ki je zadnji p element njegovega starša
:link a:link izbere vse neobiskane povezave
:not(selector) :not(p) izbere vsak element, ki ni pelement
:nth-child(n) p:nth-child(2) izbere vsak element p, ki je drugi otrok njegovega starša
:nth-last-child(n) p:nth-last-child(2) izbere vsak element p, ki je drugi otrok njegovega starša šteto od zadnjega otroka
:nth-last-of-type(n) p:nth-last-of-type(2) izbere vsak element p, ki je drugi p element njegovega starša šteto od zadnjega otroka
:nth-of-type(n) p:nth-of-type(2) izbere vsak element p, ki je drugi p element njegovega starša
:only-of-type p:only-of-type izbere vsak element p, ki je edini p element njegovega starša
:only-child p:only-child izbere vsak element p, ki je edini otrok njegovega starša
:optional input:optional izbere elemente input, ki nimajo določenega atributa required
:out-of-range input:out-of-range izbere elemente input, ki nimajo vrednosti v določenih mejah
:read-only input:read-only izbere elemente input, ki imajo določen atribut readonly
:read-write input:read-write izbere elemente input, ki nimajo določenega atributa readonly
:required input:required izbere elemente input, ki imajo določen atribut required
:root root izbere dokumentov root element
:target #ime:target izbere tekoči aktivni elemnt #ime
:valid input:valid izbere vse input elemente, ki imajo veljavno vrednost
:visited a:visited izbere vse obiskane povezave

 

<table>
   <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
   </tr>
   <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
   </tr>
   <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
   </tr>
   <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
   </tr>
   <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
   </tr>
</table>

 

table { width: 400px }
td { border: 1px solid gray }
tr:first-child { background-color: #FCCC88 }

Prikaz primera v brskalniku.

 

Psevdoelementi

Sintaksa psevdoelementa:

selektor::psevdoelement {
   lastnost: vrednost;
}

Zakaj se pri psevdoelementih uporablja dvojno dvopičje ::?

V verzijah CSS1 in CSS2 se je za zapis psevdo elementa uporabljalo enojno dvopičje :. Da ločimo med psevorazredi in psevdoelementi, je organizacija W3C v verziji CSS3 uvedla za zapis psevdoelementa dvojno dvopičje ::.

Psevdorazredi so že v naprej določeni razredi in jih ne moremo sami definirati:

Selektor Primer Opis primera
::after p::after vstavi vsebino po vsakem p elementu
::before p::before vstavi vsebino pred vsakim p elementom
::first-letter p::first-letter izbere prvi znak vsakega p elementa
::first-line p::first-line izbere prvo vrstico vsakega p elementa
::selection p::selection izbere del elementa, ki ga je označil uporabnik

 

<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; }

Prikaz primera v brskalniku.

 

p::before { 
   content: url("puscica.png");
   padding-right: 10px; 
}
p::after {
   content: " Pregledano! ";
   color: red;
   font-style: italic;
}

Prikaz primera v brskalniku.

Nazaj
Naprej