Hanki enemmän valtaa verkkosuunnittelussasi käyttämällä näitä kehittyneitä CSS-valitsimia.

CSS tukee useita valitsimia tyylielementtien tunnistamiseksi, jokaisella on omat sääntönsä. Vaikka useimmat valintamenetelmät ovat yksinkertaisia, pseudo-luokat ja pseudoelementit tarjoavat enemmän joustavuutta. Niiden avulla voit valita elementtejä niiden tilan tai sijainnin perusteella rakenteessa tai ne voivat valita tiettyjä osia sisällöstä.

Näitä valitsimia voi olla hankala käyttää, ja pseudo-luokkia on helppo sekoittaa pseudoelementteihin, joten miten ne erottuvat toisistaan?

CSS-pseudo-luokkien ymmärtäminen

CSS-pseudoluokka on kuin erityinen avainsana, jota voit käyttää valitsimien kanssa elementtien tyylistämiseen eri tavoin. Nämä avainsanat auttavat sinua kohdistamaan elementteihin, kun tiettyjä asioita tapahtuu, kuten kun käyttäjä vie hiiren elementin päälle, napsauttaa sitä tai kirjoittaa jotain syöttökenttään.

Pseudo-luokat tekevät verkkosivustasi interaktiivisemman ja reagoivamman muuttamalla elementtien ulkoasua tai käyttäytymistä käyttäjän toimien perusteella. Kun sinä

käyttää niitä muiden CSS-valitsimien kanssa, ne tarjoavat tarkan hallinnan tyylistä ja interaktiivisuudesta.

CSS-pseudoluokan syntaksi ja käyttö

CSS-pseudoluokan syntaksi koostuu kaksoispisteestä (:) jota seuraa pseudoluokan nimi. Tässä on perussyntaksi:

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

Tässä syntaksissa:

  • valitsin viittaa elementtiin tai elementteihin, jotka haluat valita ja joissa haluat käyttää tyylejä. Se voi olla HTML-elementti, luokka, tunnus tai monimutkaisempi valitsin, kuten yhdistelmä. Valitsin on valinnainen, mutta yleensä käytät sitä; ilman sitä pseudoluokkasi kohdistaa kaikkiin elementteihin, joita se voi koskea.
  • pseudoluokka on avainsana, joka edustaa tiettyä tilaa tai tilaa, johon haluat kohdistaa.

CSS luokittelee pseudo-luokat useisiin ryhmiin niiden toiminnallisuuden ja kohdeolosuhteiden perusteella. Tässä on pääluokat ja joitain esimerkkejä:

Käyttäjävuorovaikutus

:hover

Valitsee elementin, kun hiiren osoitin on sen päällä.

: aktiivinen

Valitsee elementin, kun käyttäjä aktivoi sen, yleensä napsauttamalla.

:vieraillut

Valitsee linkit, joissa käyttäjä on käynyt.

Rakenteellinen

:ensimmäinen lapsi

Valitsee vanhemman ensimmäisen alielementin.

:viimeinen lapsi

Valitsee vanhemman viimeisen alielementin.

:nth-lapsi (n)

Valitsee elementit niiden aseman perusteella vanhemmassa, jolloin voit kohdistaa tiettyihin lapsiin.

Lomakkeisiin liittyvät

:liikuntarajoitteinen

Valitsee käytöstä poistetut lomakeelementit.

:tarkistettu

Valitsee valitut valintanapit tai valintaruudut.

Käyttöliittymäelementin tila

:virheellinen

Valitsee virheelliset lomakeelementit.

:edellytetään

Valitsee lomakeelementtien pakolliset kentät.

:valinnainen

Valitsee lomakeelementit, jotka ovat valinnaisia ​​kenttiä.

Linkkiin liittyvä

:linkki

Valitsee vierailemattomat linkit.

Kielipohjainen

:lang()

Valitsee elementit niiden "lang"-attribuutissa määritetyn kielen perusteella.

Voit kokeilla yleistä esimerkkiä :hover-tehosteiden käyttäminen kuviin galleriassa. Tyypillisiä tyylejä ovat näiden kuvien suurentaminen tai häivyttäminen, kun joku vie hiiri niiden päälle.

CSS-pseudoelementtien tutkiminen

CSS-pseudoelementti on kuin erityinen avainsana, jota voit käyttää valitsimien kanssa elementin sisällön tiettyjen osien tyylistämiseen tai lisäsisällön lisäämiseen. Näiden avainsanojen avulla voit kohdistaa ja muotoilla elementtejä niiden sisältörakenteen perusteella.

Pseudoelementtejä parantaa verkkosivusi ulkoasua ja ulkoasua antamalla sinulle mahdollisuuden muotoilla elementtejä tavoilla, jotka olivat perinteisesti mahdollisia vain todellisilla HTML-elementeillä.

CSS-pseudoelementin syntaksi ja toteutus

CSS: n pseudoelementeillä on erityinen syntaksi, joka sisältää kahden kaksoispisteen (::), jota seuraa pseudoelementin nimi. Tässä on perussyntaksi:

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

Tässä syntaksissa:

  • valitsin kohdistaa elementtiin, johon haluat käyttää pseudoelementtiä. Se voi olla mikä tahansa kelvollinen CSS-valitsin, mukaan lukien ei yhtään.
  • pseudoelementti on sen pseudoelementin nimi, johon haluat kohdistaa. Voit käyttää valitsimessa vain yhtä pseudoelementtiä, koska niiden yhdistäminen ei ole järkevää.

Tässä on joitain pseudoelementtejä:

::ennen

Lisää sisällön ennen valitun elementin sisältöä.

::jälkeen

Lisää sisällön valitun elementin sisällön jälkeen.

::ensimmäinen kirjain

Tyylittelee elementin tekstin ensimmäisen kirjaimen.

::valinta

Tyylittelee sen tekstiosan, jonka käyttäjä on valinnut kohdistimellaan.

::merkki

Tyylittelee luettelokohteen merkkiruudun (esim. luettelon luettelokohdan tai numeron).

::vihje

Käyttää tyylejä vihjeissä mediaelementeissä, kuten

The ::ennen ja ::jälkeen pseudoelementtejä voi olla erityisen hankala ymmärtää, joten niiden harjoitteleminen auttaa hallitsemaan loput.

Samankaltaisuudet ja eroavaisuudet

Tässä ovat yhtäläisyydet ja erot CSS-pseudo-luokkien ja pseudoelementtien välillä:

Pseudo-luokat

Pseudoelementit

Syntaksi

Etuliitteenä yksi kaksoispiste (:).

Etuliitteenä kaksi kaksoispistettä (::).

Käyttö

Valitse ja tyylistä elementtejä niiden tilan, sijainnin tai käyttäjän vuorovaikutuksen perusteella.

Tyylittele elementin sisällön tiettyjä osia tai luo virtuaalisia elementtejä.

Valitsijat

Voi esiintyä missä tahansa kompleksin tai yhdistevalitsimen kohdassa.

Sen on oltava valitsimen viimeinen komponentti, ja se voi näkyä vain kerran.

Sisällön lisäys

Ei lisää sisältöä, ensisijaisesti tilaan perustuvaa tyyliä varten.

Voi lisätä sisältöä tai virtuaalisia elementtejä ennen tai jälkeen valitun elementin sisällön.

Typografinen tyyli

Ei yleensä käytetä typografiseen muotoiluun.

Käytetään tekstin ja typografisen muotoilun tekemiseen (esim. ::ensimmäinen rivi, ::ensimmäinen kirjain).

Kohdistetut osat

Kohdistaa kokonaisia ​​elementtejä.

Kohdistaa elementin sisällön tiettyihin osiin.

Selaimen tuki

Yleensä hyvin tuettu.

Yleensä hyvin tuettu, mutta joissakin vanhemmissa selaimissa voi olla rajoitettu tuki.

Pseudo-luokat ja pseudoelementit ovat tärkeitä CSS: ssä erilaisten tyylien ja interaktiivisten ominaisuuksien luomisessa. Vaikka niillä on joitain yhtäläisyyksiä, niillä jokaisella on oma ainutlaatuinen roolinsa web-suunnittelussa ja -kehityksessä.

Pseudo-luokat ja pseudoelementit toiminnassa

Voit harjoitella CSS-pseudo-luokkien ja pseudoelementtien käyttöä eri projekteissa arvioidaksesi ymmärrystäsi. Esimerkkejä helpoista projekteista, joita voit tehdä, ovat muun muassa profiilikortit, navigointivalikot ja luettelon muotoilu. Nämä projektit tarjoavat käytännön kokemusta parantaaksesi CSS-taitojasi ja yhdistävät samalla vuorovaikutteisuutta ja tyyliä verkkosuunnitelmiisi.