CSS Osnove

Pseudo klasa :focus

:focus klasa primenjuje se na elementima koji se obično nalaze u HTML formama a aktiviraju se u trenutku kada kliknete mišem unutar odredjenog polja forme. Daćemo primer:

input:focus {background-color:green;}

govori pretraživaču da u trenutku kada u polje input korisnik klikne mišem u cilju unosa podataka, pozadinu tog pravougaonog prostora oboji u zelenu boju. Nakon prelaska u neku drugu ćeliju, boja pozadine prethodne ćelije vraća se na podrazumevanu. Momenat kada korisnik napušta ćeliju definiše se stanjem :onblur i inicira ili klikom izvan forme ili prelaskom na drugo polje korišćenjem tastera TAB.

Pseudo selektori za selektovanje odredjenih elemenata u okviru niza

Ovi pseudo selektori primenjuje se u slučaju da želite da ciljate svaki drugi ili svaki n-ti ili n-1 element unutar roditeljskog elementa.

Da bi lakše objasnili, iskoristićemo primer neuredjene liste.

<ul>

<li>Prva</li>

<li>Druga</li>

<li>Treća</li>

<li>Četvrta</li>

<li>Peta</li>

<li>Šesta</li>

<li>Sedma</li>

</ul>

Zamislimo da od svih stavki u listi (Prva, Druga, Treća, itd.) želimo da u zelenu boju obojimo samo četvrtu stavku, tj. stavku sa tekstom Četvrta. Kako bi to mogli da uradimo? Iz onoga što smo do sada obradili, u obzir dolazi samo ul li+li+li+li {color;green;}.

To nećemo koristiti. Zašto? Postoji mnogo elegantnije rešenje u vidu pseudo selektora nth-child()

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn