CSS, pseudo-clasă, pseudo-element: hover, child, target

Combinând HTML și CSS, puteți gestiona absolut toate elementele unei pagini Web. Cu ajutorul stilurilor, puteți schimba cu ușurință aspectul oricărui bloc sau linie. Adesea, un coder trebuie să îndeplinească o sarcină mai complexă - de a schimba aspectul nu al elementului însuși, ci al părții sale individuale sau al unei anumite stări. În acest caz, pseudo-clasele CSS vin la salvare.

Pseudo-clasele funcționează în același mod ca și clasele obișnuite în marcare, dar nu sunt prezente fizic pe pagină. Cu ajutorul acestora, puteți selecta elemente pe baza informațiilor care nu sunt în document, care nu pot fi selectate cu selectorul obișnuit. Iată un exemplu simplu: aveți un buton roșu și doriți ca acesta să devină albastru atunci când îl mutați. Teoretic, aceasta poate fi implementată în jаvascript, dar de ce o astfel de complexitate? Este mult mai convenabil de folosit : hover CSS. Cu ajutorul acestuia, puteți da blocului orice parametri care vor funcționa numai atunci când plasați mouse-ul peste mouse.

Lista pseudo-claselor CSS este actualizată periodic. Poate că în timp ce citiți acest material, vor apărea câteva noi. În primul rând, să ne uităm la cele care au apărut în specificația CSS3.

: n-de-tip

Să presupunem că aveți o listă în care doriți să utilizați alternanța culorilor, adică prima linie va fi scrisă, de exemplu, în roșu, iar a doua linie va fi albastră, a treia roșie din nou, a patra din nou albastră. Anterior, a trebuit să creați noi clase pentru acest lucru. Producătorii din trecut au adăugat fiecare element din listă în clasă și apoi și-au schimbat aspectul în foaia de stil. Nu a fost foarte convenabil și poluat aspectul.

Acum totul este mai ușor. Utilizați clasa pseudo CSS: nth-of-type. Aceasta va oferi posibilitatea de a obține efectul vizual necesar fără a schimba nimic în marcare. Principiul de funcționare este simplu: specificați un selector și în paranteze după numele acestuia scrieți o formulă sau un cuvânt cheie care vor găsi elementele necesare. De exemplu: nth-of-type (even) va găsi toate elementele uniforme și: nth-of-type (impar) - ciudat. Există un număr mare de formule care sunt utilizate pentru controlul cel mai precis. În paranteze, puteți specifica un număr - caz în care stilurile vor fi aplicate elementului al cărui index este egal cu acest număr.

: n-copil

Această pseudo-clasă CSS este similară cu cea precedentă, dar spre deosebire de aceasta funcționează exclusiv cu copiii elementului selectat. De exemplu, dacă doriți să o utilizați pentru a particulariza aspectul etichetelor

Pentru control precis, se pot folosi formule. Ele sunt destul de dificile pentru un începător, dar merită să se sapă puțin în sintaxa, cum se simplifică lucrurile. Formulele arata astfel: an + b, unde a este un multiplicator si b este un offset. De exemplu, dacă specificați n în paranteze, pseudo-clasa va selecta toți copiii (deoarece nu sunt specificate condiții suplimentare sub forma a și b). Dacă specificați n + 2, toate elementele vor fi selectate cu excepția primei (deoarece offsetul este două). Cel mai bine este să studiezi acest punct în practică. Experimentați cu componentele copilului și formule diferite.

: ultimul copil

Totul este simplu. Pseudo-clasele CSS pentru copii sunt folosite pentru a selecta un element particular. Aceasta selectează ultimul copil al părintelui. Este folosit destul de des, de exemplu, pentru a evidenția ultimul rând al tabelului sau pentru a elimina indentarea din ultimul bloc pentru a evita transferul acestuia pe linia următoare.

: n-ultimul copil

Conform principiului acțiunii, este similar cu cel n-copil menționat anterior, dar acționează în direcția opusă, adică atunci când se utilizează elementele se va deplasa de jos în sus. Acest lucru este util dacă doriți să găsiți ultimele elemente.

S-ar putea să credeți că aceste pseudo-clase și CSS pseudo-elemente sunt inutile, pentru că puteți atinge acest obiectiv și cu ajutorul claselor obișnuite. Nu e așa. : n-copil: n-ultimul copil și analogii lor sunt foarte utili atunci când lucrează la proiecte mari - de exemplu, în cazul în care blocul are un număr mare de copii. Setarea manuală a claselor este lungă și dificilă.

Pseudo-clase de management de stat

Ce se întâmplă dacă trebuie să modificați aspectul unui element într-o anumită stare? În acest caz, sunt furnizate pseudo-clase CSS de presare, îndrumare și alte acțiuni. Să le analizăm mai detaliat.

: link

Aceasta este o pseudo-clasă de link-uri CSS, nu doar orice, ci doar cele care nu au fost încă vizitate. În acesta, puteți specifica stiluri pentru elementele respective , pe care utilizatorul nu a schimbat încă.

: vizitat

Un analog al versiunii anterioare, care gestionează doar legăturile deja vizitate. Prin combinarea acestor două pseudo-clase, puteți particulariza aspectul etichetelor exact cum aveți nevoie. Cu toate acestea, rețineți că stările sunt calculate pentru anumite browsere și resetate după ce ați șters istoricul.

Clasa Pseudo: CSS țintă

Una dintre cele mai interesante pseudo-clase, care, cu o utilizare corespunzătoare într-o oarecare măsură, înlocuiește utilizarea jаvascript. Acesta vă permite să gestionați un element al cărui identificator este specificat în bara de adrese a paginii. Da, prima dată e greu de înțeles. Să încercăm să facem un exemplu.

Să presupunem că avem 3 casete div pe pagină cu anumite id: id1, id2, id3. De asemenea, avem trei linkuri cu valorile href corespunzătoare: # id1, # ​​id2, # id3. Când faceți clic pe primul link din bara de adrese a paginii, după ce link-ul către pagina în sine va apărea id-ul corespunzător.

În CSS, pentru toate blocurile div, afișarea: nici o proprietate nu este specificată, adică, în mod implicit, acestea nu sunt afișate. Utilizați destinația: div și setați proprietatea de afișare: blocați proprietatea. Acum, când faceți clic pe link-uri cu anumite href, blocurile cu id-ul corespunzător vor fi atribuite display: block, ceea ce înseamnă că vor începe să apară pe pagină! Când faceți clic pe link-ul cu href = "# id1" apare un bloc cu id1 și așa mai departe.

Încă nimic nu este clar? Încercați să experimentați. Creați o pagină cu marcajele și stilurile de mai sus. În câteva minute vei fi bine în tot.

Pseudo-clase care pot fi aplicate oricarui element

Majoritatea pseudo-claselor descrise mai sus necesită referințe pentru lucru. Cu toate acestea, nu toată lumea are nevoie de elemente . O serie de opțiuni pot fi aplicate la absolut orice parte a paginii.

• : activă este destinată elementelor de styling pe care utilizatorul a dat clic pe butonul stâng al mouse-
• : hover - CSS pentru elementele la care utilizatorul se deplasează cursorul -
• : focalizare - pentru acele părți ale paginii care sunt în prezent în atenție. Această pseudo-clasă este adesea folosit pentru a lucra cu formulare. De exemplu, dacă doriți să evidențiați șirul de introducere pentru numele de utilizator, când vizitatorul plasează cursorul în el și începe să scrie caractere.

Amintiți-vă că: activ este activ numai când o apăsați. Imediat după ce butonul stâng al mouse-ului nu mai funcționează, stilurile asociate cu acesta vor dispărea și elementul va fi afișat așa cum a fost afișat în mod implicit. În majoritatea cazurilor, această pseudo-clasă este folosită pentru a lucra cu butoane. Puteți să le setați un număr mare de state. De exemplu, în mod prestabilit, butonul va fi albastru, când se va deplasa - verde, atunci când este apăsat - roșu și așa mai departe.

Desigur, pseudo-clasele sunt suportate pe deplin doar de browserele moderne. De exemplu, în IE6 și 7, nu puteți utiliza focalizarea, iar mouse-ul și activul în IE6 funcționează numai pentru referințe. Să sperăm că nu trebuie să lucrați cu astfel de browsere și dacă aveți nevoie, utilizați comentariile condiționate.

Pseudo-clase suplimentare

Lista de mai sus nu se limitează la listă. Datorită CSS-ului modern, puteți selecta numai elementele incluse (: activate) sau numai dezactivate (: dezactivate), numai casetele de selectare bifate și radio (: verificate). Descrieți pe scurt câteva opțiuni pe care le puteți utiliza pentru a controla mai atent aspectul conținutului.

• : numai-copil - abilitatea de a aplica un stil unui element care este singurul element copil -
• : lang - pentru a lucra cu elemente care au un limbaj setat folosind lang-
• : root - folosit pentru a selecta elementul rădăcină. În consecință, în HTML, acesta este eticheta -
• : nu este un instrument foarte puternic. Ea face posibilă restricționarea aplicării stilurilor la anumiți selectori. Iată un exemplu: .blue-color: nu (span). Acest selector aplică stiluri pentru toate elementele cu clasa culorilor albastre, dacă nu sunt .

O listă completă de pseudo-clase se poate întinde pe mai multe pagini. Majoritatea tipografilor folosesc doar câteva dintre ele în practică, preferând să gestioneze statele utilizând jаvascript. Da, este convenabil, dar există o serie de puncte în care se pot obține mai ușor rezultate mai eficiente folosind pseudo-clasa corespunzătoare.