Uno sguardo al selettore strutturale di primo tipo CSS3
Una cosa che amo del CSS3 è la nuova aggiunta di selettori che ci consente di indirizzare gli elementi in modo specifico senza fare affidamento sul classe, id o altro attributo di elemento, e uno che tratteremo qui è il seguente selettore, : First-of-type.
Il : First-of-type il selettore sceglierà come target il primo figlio dell'elemento specificato, ad esempio, lo snippet seguente verrà selezionato come target per primo h2 sulla pagina web.
h2: dichiarazione di stile / * di primo tipo * /
Il : First-of-type è uguale a : Nth-of-type (1), quindi piuttosto che selezionare solo il primo del tipo, possiamo selezionare ulteriormente il secondo, il terzo e così via. Il seguente frammento punterà al secondo h2 elemento sulla pagina web.
h2: nth-of-type (2) / * dichiarazione di stile * /
: First-of-type” vs. “:Primogenito”
Potrebbe sembrare che questi due selettori stiano facendo la stessa cosa, ma non è così. Vediamo la seguente dimostrazione:
Diciamo che abbiamo cinque elementi di paragrafo racchiusi all'interno di a div, come questo:
Pragrafo 1
Pragrafo 2
Pragrafo 3
Paragrafo 4
Pragrafo 5
Ora, vorremmo selezionare il primo paragrafo usando il :Primogenito selettore.
p: first-child padding: 5px 10px; border-radius: 2px; sfondo: # 8960a7; colore: #fff; border: 1px solid # 5b456a;
E come abbiamo anticipato, il primo paragrafo viene selezionato con successo.
- : Demo del primo figlio
Tuttavia, quando noi aggiungi un elemento diverso prima il primo paragrafo, diciamo un h1, come il frammento di seguito:
Titolo 1
Pragrafo 1
Pragrafo 2
Pragrafo 3
Paragrafo 4
Pragrafo 5
il primo paragrafo non sarà selezionato, come il primo figlio dentro il div è non più un paragrafo, ma ora è un h1.
Quindi, questa è la situazione in cui il : First-of-type il selezionatore viene per risolvere il problema.
p: first-of-type padding: 5px 10px; border-radius: 2px; sfondo: # a8b700; colore: #fff; border: 1px solid # 597500;
- : demo di primo tipo
Il “Scorso” Selettore
Dove c'è il “primo”, allora ci sarà anche il “scorso”.
Il contrario dei due selettori che abbiamo discusso sopra sono i seguenti due selettori; il :ultimo bambino e il : Last-of-type. Fondamentalmente sono gli stessi dei due precedenti, eccetto per il target ultimo figlio dell'elemento specificato.
Ad esempio, questo frammento di seguito verrà indirizzato sull'ultimo paragrafo all'interno del div.
p: last-child padding: 5px 10px; border-radius: 2px; sfondo: # 8960a7; colore: #fff; border: 1px solid # 5b456a;
- : Demo ultimo figlio
E questo frammento si rivolgerà anche all'ultimo paragrafo nella stessa situazione di cui abbiamo discusso sopra; questa volta il è seguito direttamente da un elemento diverso.
p: last-of-type padding: 5px 10px; border-radius: 2px; sfondo: # a8b700; colore: #fff; border: 1px solid # 597500;
- : Demo di ultimo tipo
Il Selectivizr
Come qualsiasi altra nuova funzionalità in CSS3, questi selettori non sono supportati nei vecchi browser, principalmente Internet Explorer da 6 a 8, con un'eccezione per il :Primogenito selettore, come è stato aggiunto dal CSS2.1. Suo parente il :ultimo bambino è stato aggiunto solo nei CSS3.
Quindi, se tutti questi selettori che abbiamo menzionato qui sono davvero necessari per il tuo sito web, puoi utilizzare una libreria JavaScript chiamata Selectivizr per emulare le funzionalità del selettore CSS3.
Selectivizr dipende da altre librerie JavaScript per funzionare, come jQuery, Dojo, Prototype e MooTools; e vedendo dalla tabella di comparazione nel sito ufficiale, MooTools sembra essere in grado di gestire tutti i selettori.
Quindi, includiamolo insieme al Selectivizr, come segue:
Il commento condizionale sopra assicurerà che queste librerie vengano caricate solo in Internet Explorer 8 e versioni successive.
Infine, puoi visualizzare la demo dai seguenti link e ora dovrebbe funzionare sia con i browser moderni che con quelli precedenti (IE8 e seguenti). È anche possibile scaricare il file sorgente per ulteriori esami. Godere.
- dimostrazione
- Scarica fonte
