:last-child
Selektors ļauj mērķēt pēdējo elementu tieši iekšpusē tā satur elementu. CSS Selectors 3. līmeņa specifikācijā tas ir definēts kā “strukturāla pseidoklase”, kas nozīmē, ka to lieto satura veidošanai, pamatojoties uz tā attiecībām ar vecāku un brāļu saturu.
Pieņemsim, ka mums ir raksts un mēs vēlamies padarīt pēdējo rindkopu mazāku, lai darbotos kā satura secinājums (piemēram, redaktora piezīme):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Tā vietā, lai izmantotu klasi (piemēram, .last
), mēs varam to izmantot :last-child
:
p:last-child ( font-size: 0.75em; )
Lietošana :last-child
ir ļoti līdzīga, :last-of-type
bet ar vienu kritisku atšķirību: tā ir mazāk specifiska. :last-child
mēģinās pieskaņot tikai pašu vecāku elementa pēdējo pakārtoto pakāpi, savukārt last-of-type
pēdējais norādītā elementa gadījums, pat ja HTML kodā tas nebūs pēdējais. Iepriekš minētajā piemērā iznākums būtu vienāds tikai tāpēc, ka arī pēdējais bērns article
ir pēdējais p
elements. Tas atklāj spēku :last-child
: tas var identificēt elementu saistībā ar visiem tā brāļiem un māsām, ne tikai ar tāda paša veida brāļiem un māsām.
Tālāk sniegtajā pilnīgākajā piemērā parādīts :last-child
pseidoklases selektora un ar to saistītā selektora lietojums :first-child
.
Pārbaudiet šo pildspalvu!
Pārlūka atbalsts
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Jebkurš | 3.2+ | Jebkurš | 9,5+ | 9+ | Jebkurš | Jebkurš |
:last-child
tika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts ir nevainojams, un jaunie pseido-selektori tiek plaši izmantoti ražošanas vidēs. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu IE polifill, vai arī izmantojiet šos atlasītājus nekritiskos veidos, kas ir ieteicami pakāpeniski.