Pagina principala » Codificare » Ghidul definitiv pentru pseudo-clasele CSS

    Ghidul definitiv pentru pseudo-clasele CSS

    Fie că sunteți un novice sau un dezvoltator CSS cu experiență, probabil că ați auzit de pseudo-clase. Cea mai cunoscută pseudo-clasă este probabil :planare, care ne permite să modelam un element atunci când este în starea de hover, adică atunci când un dispozitiv de indicatori, cum ar fi un șoarece, este îndreptat spre el.

    Urmând conceptul postărilor anterioare pe margine: plutitoarele auto și CSS, vom examina mai aprofundat pseudo-clasele din acest post. Vom vedea ce pseudo-clase sunt într-adevăr, cum funcționează, cum putem să le clasificăm și cum sunt diferite de pseudoelemente.

    Ce sunt pseudo-clasele??

    O pseudo-clasă este un cuvânt cheie pe care îl putem adăuga la selectorii CSS pentru a defineste o stare speciala a elementului HTML care aparține. Putem adăuga o pseudo-clasă la un selector CSS folosind colon sintaxă : asa: a: hover ...

    O clasă CSS este un atribut pe care îl putem adăuga elementelor HTML pe care dorim să le aplicăm aceleași reguli de stil, cum ar fi elementele de meniu de top sau titlurile widget-urilor din bara laterală. Cu alte cuvinte, putem folosi clase CSS grupați sau clasificați elementele HTML care sunt similare într-un fel sau altul.

    Pseudo-clasele sunt similare cu ele în sensul că sunt și ele folosit pentru a adăuga reguli de stil elementelor care au aceeași caracteristică.

    Dar, în timp ce există clase autentice definite de utilizator și pot fi văzute în codul sursă, de exemplu

    , pseudo-clasele sunt adăugate de UA (agenți utilizator), cum ar fi browserele web, pe baza stării actuale a elementului HTML care aparține.

    Scopul pseudo-claselor

    locul de muncă al clasei CSS regulate este de a clasifica sau grupa elemente. Dezvoltatorii știu cum trebuie grupați elementele lor: ele pot forma clase precum "meniu-elemente", "butoane", "miniaturi" etc., pentru a grupa și pentru a forma mai târziu elementele similare. Aceste clasificări se bazează pe caracteristicile elementelor care sunt dat de dezvoltatorii înșiși.

    De exemplu, dacă un dezvoltator decide să utilizeze a

    ca obiect miniatural, ea sau ea poate clasifica acest lucru
    cu o clasă "miniatură".

     
    [...]

    Elementele HTML însă au propriile caracteristici comune pe baza stării, poziției, naturii și interacțiunii cu pagina și cu utilizatorul. Acestea sunt caracteristicile care sunt nu marcate în mod obișnuit în codul HTML, dar noi putem vizați-le cu pseudo-clase în CSS, de exemplu:

    • un element care este ultimul copil în interiorul elementului părinte
    • un link care este vizitat
    • un element care a dispărut ecran complet.

    Acestea sunt acele tipuri de caracteristici care sunt în general vizate de pseudo-clase. Pentru a înțelege mai bine diferența dintre clase și pseudo-clase, să presupunem că folosim clasa .ultimul pentru a identifica ultimele elemente din containerele părinte diferite.

     
    • punctul 1
    • punctul 2
    • punctul 3
    • punctul 4

    Putem modela aceste elemente ale ultimului copil cu următoarele CSS:

     li.last text-transform: majuscule;  option.last font-style: italic;  

    Dar ce se întâmplă când se schimbă ultimul element? Ei bine, va trebui să ne mișcăm .ultimul clasa de la ultimul element până la cel actual.

    Acest hassle de actualizarea claselor poate fi lăsată de agentul utilizatorului, cel puțin pentru acele caracteristici care sunt comune printre elementele (și fiind un ultim element este la fel de comun cum poate obține). Având o pre-definită :ultimul copil pseudo-clasă este foarte util într-adevăr. În acest fel, noi nu trebuie să indicați ultimul element în codul HTML, dar putem încă să le formăm cu următorul CSS:

     li: ultimul copil text-transform: majusculă;  opțiune: last-child font-style: italic; 

    Tipurile principale de pseudo-clase

    Există multe tipuri de pseudo-clase, toate oferindu-ne modalități de a direcționa elemente pe baza caracteristicilor lor care sunt altfel inaccesibile sau mai dificil de accesat. Iată o listă de pseudo-clase standard în MDN.

    1. Pseudo-clase dinamice

    Pseudo-clasele dinamice sunt adăugate și eliminate din elementele HTML dinamic, bazate pe starea în care se află tranziția ca răspuns la interacțiunile utilizatorului. Unele dintre exemplele de pseudo-clase dinamice sunt :planare, : focus, :legătură, și :vizitat, toate acestea putând fi adăugate la ancora etichetă.

     a: vizitat culoare: # 8D20AE;  .button: hover, .button: focus font-weight: bold;  

    2. Pseudo-clase bazate pe stat

    Pseudo-clasele bazate pe stat se adaugă elementelor atunci când sunt într-o stare statică particulară. Unele dintre cele mai cunoscute exemple sunt:

    • : verificat care pot fi aplicate pentru casetele de selectare ()
    • :ecran complet pentru a viza orice element care este în prezent afișat în modul ecran complet
    • : dezactivat pentru elementele HTML care pot fi în modul dezactivat, cum ar fi ,