Nende täiustatud CSS-i valijate abil saate oma veebikujunduse üle rohkem võimu.

CSS toetab stiilielementide tuvastamiseks mitmesuguseid valijaid, millest igaühel on oma reeglid. Kuigi enamik valikumeetodeid on lihtsad, pakuvad pseudoklassid ja pseudoelemendid suuremat paindlikkust. Need võimaldavad teil valida elemente nende oleku või asukoha alusel struktuuris või valida konkreetsed sisuosad.

Neid valijaid võib olla keeruline kasutada ja pseudoklasse on lihtne pseudoelementidega segada, kuidas siis neil vahet teha?

CSS-i pseudoklasside mõistmine

CSS-i pseudoklass on nagu spetsiaalne märksõna, mida saate selektoritega kasutada elementide erineval viisil kujundamiseks. Need märksõnad aitavad teil elemente sihtida, kui teatud asjad juhtuvad, näiteks kui kasutaja viib hiire elemendi kohale, klõpsab sellel või sisestab midagi sisestusväljale.

Pseudoklassid muudavad teie veebilehe interaktiivsemaks ja reageerivamaks, muutes elementide välimust või käitumist kasutaja tegevuse põhjal. Kui sa kasutage neid koos teiste CSS-i valijatega

, tagavad need täpse kontrolli stiili ja interaktiivsuse üle.

CSS-i pseudoklassi süntaks ja kasutamine

CSS-i pseudoklassi süntaks koosneb koolonist (:), millele järgneb pseudoklassi nimi. Siin on põhiline süntaks:

selector:pseudo-class {
/* styles */
}

Selles süntaksis:

  • valija viitab elemendile või elementidele, mida soovite valida ja millele soovite stiile rakendada. See võib olla HTML-element, klass, ID või keerulisem valija nagu kombinatsioon. Valija on valikuline, kuid tavaliselt kasutate seda; ilma selleta sihib teie pseudoklass kõiki elemente, mida ta saab rakendada.
  • pseudoklass on märksõna, mis tähistab konkreetset olekut või seisundit, mida soovite sihtida.

CSS liigitab pseudoklassid nende funktsionaalsuse ja sihitavate tingimuste alusel mitmesse rühma. Siin on peamised kategooriad ja mõned näited.

Kasutaja interaktsioon

:hõljuma

Valib elemendi, kui hiirekursor hõljub selle kohal.

: aktiivne

Valib elemendi, kui kasutaja selle aktiveerib, tavaliselt klõpsates.

:külastas

Valib lingid, mida kasutaja on külastanud.

Struktuurne

:esimene laps

Valib vanema esimese alamelemendi.

:viimane laps

Valib vanema viimase alamelemendi.

:nth-laps (n)

Valib elemendid nende positsiooni alusel vanemas, võimaldades teil sihtida konkreetseid lapsi.

Vormiga seotud

:puuetega

Valib keelatud vormielemendid.

:kontrollitud

Valib märgitud raadionupud või märkeruudud.

UI elemendi olek

:kehtetu

Valib kehtetud vormielemendid.

:nõutud

Valib vormielementide nõutavad väljad.

: valikuline

Valib vormielemendid, mis on valikulised väljad.

Lingiga seotud

:link

Valib külastamata lingid.

Keelepõhine

:lang()

Valib elemendid nende atribuudis „lang” määratud keele põhjal.

Võite proovida levinud näidet :hover efektide rakendamine piltidele galeriis. Tüüpilised stiilid hõlmavad nende piltide suurendamist või tuhmimist, kui keegi hõljutab nende kohal.

CSS-i pseudoelementide uurimine

CSS-i pseudoelement on nagu spetsiaalne märksõna, mida saab kasutada valijatega elemendi sisu teatud osade stiilimiseks või täiendava sisu sisestamiseks. Need märksõnad võimaldavad sihtida ja stiilida elemente nende sisustruktuuri alusel.

Pseudoelemendid täiustage oma veebilehe kujundust ja kujundust andes teile võimaluse stiilida elemente viisil, mis oli traditsiooniliselt võimalik ainult tõeliste HTML-elementidega.

CSS-i pseudoelementide süntaks ja rakendamine

CSS-i pseudoelementidel on spetsiifiline süntaks, mis hõlmab kahe kooloni (::), millele järgneb pseudoelemendi nimi. Siin on põhiline süntaks:

selector::pseudo-element {
/* styles */
}

Selles süntaksis:

  • valija sihib elementi, millele soovite pseudoelementi rakendada. See võib olla mis tahes kehtiv CSS-i valija, sealhulgas mitte ükski.
  • pseudoelement on pseudoelemendi nimi, mida soovite sihtida. Selektoris saate kasutada ainult ühte pseudoelementi, kuna nende kombineerimisel pole tegelikult mõtet.

Siin on mõned pseudoelemendid:

:: enne

Lisab sisu valitud elemendi sisu ette.

::pärast

Lisab sisu valitud elemendi sisu järele.

::esimene täht

Stiilib elemendi teksti esimese tähe.

::valik

Stiilib tekstiosa, mille kasutaja on kursoriga valinud.

::marker

Stiilib loendiüksuse markerkasti (nt loendi täppi või numbrit).

::kii

Rakendab stiile meediumielementide vihjetele nagu

The ::enne ja ::pärast pseudoelemente võib olla eriti keeruline mõista, nii et nende harjutamine aitab teil ülejäänu omandada.

Sarnasused ja erinevused

Siin on CSS-i pseudoklasside ja pseudoelementide sarnasused ja erinevused:

Pseudoklassid

Pseudoelemendid

Süntaks

Eesliide ühe kooloniga (:).

Eesliide kahe kooloniga (::).

Kasutamine

Valige ja kujundage elemendid nende oleku, positsiooni või kasutaja interaktsiooni alusel.

Stiilige elemendi sisu konkreetseid osi või looge virtuaalseid elemente.

Valijad

Võib esineda kompleksi või ühendi selektori mis tahes punktis.

Peab olema valija viimane komponent ja võib ilmuda ainult üks kord.

Sisu lisamine

Ei sisesta sisu, peamiselt olekupõhise stiili jaoks.

Saab sisestada sisu või virtuaalseid elemente valitud elemendi sisu ette või järele.

Tüpograafiline stiil

Tavaliselt ei kasutata tüpograafiliseks kujundamiseks.

Kasutatakse teksti ja tüpograafilise stiili jaoks (nt ::esimene rida, ::esimene täht).

Sihitud osad

Sihib terveid elemente.

Sihib elemendi sisu konkreetseid osi.

Brauseri tugi

Üldiselt hästi toetatud.

Üldiselt hästi toetatud, kuid mõnel vanemal brauseril võib olla piiratud tugi.

Pseudoklassid ja pseudoelemendid on CSS-is olulised erinevate stiilide ja interaktiivsete funktsioonide loomisel. Kuigi neil on mõningaid sarnasusi, on neil kõigil veebidisainis ja -arenduses oma ainulaadne roll.

Pseudoklassid ja pseudoelemendid tegevuses

Oma arusaamise hindamiseks saad harjutada CSS-i pseudoklasside ja pseudoelementide kasutamist erinevates projektides. Lihtsate projektide näited on muu hulgas profiilikaardid, navigeerimismenüüd ja loendi stiil. Need projektid pakuvad praktilist kogemust teie CSS-i oskuste parandamiseks, lisades samal ajal interaktiivsust ja stiili oma veebikujundustesse.