Oggi andremo a conoscere i selettori di attributi. Quali sono? Come li uso? Quali sono i nuovi selettori di Attributi CSS3? Risponderemo a queste domande e altro ancora.
Attributi HTML
Prima di presentarti il concetto dei selettori di attributi CSS, dovresti sapere che cos'è un attributo HTML. La buona notizia è che conosci già molti di loro: classe, id, stile, e href per esempio. Ci sono ancora un sacco di più, date un'occhiata a W3.org per una lista completa.
Il CSS rende lo styling di alcuni attributi facile. Ad esempio, se vogliamo uno stile id o classe, usiamo solo il seguente
Questo è tutto a posto, ma se vogliamo modellare altri attributi? È qui che entrano in gioco i selettori dell'attributo.
Selettori di attributi
Come abbiamo appena appreso, i selettori di attributo sono esattamente come suonano, un modo per selezionare e targetizzare attributi specifici usando i CSS. Questo è davvero molto facile da fare e coinvolge solo una serie di parentesi contenenti l'HTML che hai usato. Vediamo come funziona osservando prima un HTML di base.
Diciamo che volevo scegliere come target solo il collegamento Design Shack. Potrei usare pseudo selettori, ma questo presuppone che l'elenco rimanga in tale ordine e il supporto del browser non è il migliore. Invece, quello che possiamo fare è usare un selettore di attributi per indirizzare lo specifico? Href? a cui siamo interessati
Ripetizione degli attributi
Un altro esempio che viene utilizzato molto è un elenco di contatti, uno o più dei quali dovrebbero essere in stile in un certo modo. Usando gli attributi, possiamo distinguere tra amici e contatti.
Possiamo quindi entrare e dare uno stile a ciascuno di questi rel attributi in modo diverso usando la stessa sintassi di cui sopra. Molto simile a una classe, più elementi possono soddisfare i criteri in un'unica dichiarazione.
Usando questo codice possiamo ottenere i risultati qui sotto. Si noti che anche se iniziamo ad aggiungere nuovi contatti all'inizio dell'elenco, questi selettori continueranno a funzionare dove : Nth-child no. Abbastanza bello vero? Inoltre, quasi tutti gli attuali browser supportano questi, incluso IE alla versione 7!
È anche importante notare che non è necessario essere così specifici. Il seguente stile sarà qualunque elemento con a rel attributo applicato.
Gestione dei valori multipli
La parte difficile dell'utilizzo dei selettori di attributo è che diventano un po 'divertenti quando ci sono più attributi. Considera la seguente modifica alla nostra lista precedente.
Si potrebbe pensare che lo styling della prima voce dell'elenco sia lo stesso processo considerando che ha ancora un amico? in esso, ma non è questo il caso. Semplicemente usando = 'Amico' non sarà più adatto a questo obiettivo. Invece, dobbiamo usare il seguente, che cerca "amico"? come uno dei rel valori.
Questo risulterà nel? Larry? l'elemento della lista viene evidenziato in grassetto come nella precedente un [rel = 'amico'] la sintassi lo avrebbe mancato.
Selettori di attributi CSS3
CSS3 ci ha regalato tanti fantastici nuovi giocattoli e strumenti con cui giocare. Non sorprende quindi che ci siano anche alcuni nuovi selettori di attributi che ci aiutano a portare ancora più specificità nel nostro targeting. Iniziamo con il mio preferito.
Styling Allo stesso modo Attributi nominati
Questo è dove le cose diventano grandiose. Supponiamo che tu abbia il seguente codice HTML e che desideri scegliere come target solo il file upperSection e lowerSection, Come lo faresti?
Una semplice risposta è il nuovo? Arbitrary Substring Attribute Value Selector ?, o? La cosa veramente bella piccola asterisco.? Dal momento che i due div che vogliamo targetizzare entrambi contengono? Section? nel loro nome, possiamo facilmente bersagliarli.
Sono stato spazzato via da questo. Qui stiamo usando i CSS per scavare in realtà attraverso i nostri nomi ID per trovare valori specifici all'interno di un nome più grande e indirizzare quegli elementi. Questo apre molte possibilità e rende il targeting complesso con un piccolo markup un compito molto più semplice.
Inizio e fine
Mentre il selettore del valore dell'attributo della sottostringa arbitraria sceglierà come target una determinata stringa, le versioni Beginning e Ending consentono di gestire i casi più rari dove si desidera prendere in considerazione solo il primo o l'ultimo elemento.
Diciamo che vogliamo prendere di mira tutti i tirapiedi, rendendo Larry e Moe rossi e gialli ricci. Per fare questo, possiamo inserire l'uso [Titolo ^ = 'uomo di paglia'] per afferrare tutti quelli con? stooge? come prima parola e [Titolo $ = 'uomo di paglia'] per afferrare tutti quelli con? stooge? come l'ultima parola.
Selezione dei selettori di attributi
Diciamo che vuoi essere super specifico e aggiungere più criteri. È semplice come concatenare più selettori di attributi. Vediamo come funziona con l'HTML qui sotto.
Ora, miriamo a qualsiasi collegamento con? Stooge? nel titolo, ma solo quelli che iniziano con? the ?.Si noti che non vogliamo indirizzare casualmente? perché questo appare anche nell'ultimo elemento. Ecco la sintassi per ottenere questo:
Semplice, giusto? Tutto ciò che abbiamo fatto è stato prendere le due regole che ci servivano e metterle sulla stessa linea. È importante notare che questo non è né uno né uno scenario, ma entrambi / e. Verranno modificati solo gli articoli che soddisfano entrambi i criteri.
Ulteriori letture
Se sei abbastanza di un nerd che stai semplicemente amando i selettori di attributi, ci sono altre due fonti che consiglio vivamente di provare.
Trucchi CSS
Innanzitutto, Chris Coyier ha una presentazione molto approfondita su CSS Tricks che copre gran parte degli stessi contenuti che abbiamo trattato qui. Chris è un super genio dei CSS e probabilmente li spiega molto meglio di me!
Il libro di CSS3
Successivamente, dai un'occhiata a The Book of CSS3 di Peter Gasston, che è stato il mio riferimento principale per tutto ciò che riguarda i CSS3 ultimamente. Semplicemente non ne ho mai abbastanza di questo libro e ne ho dato abbastanza la posizione permanente sulla mia scrivania! Gasston aggiunge a questa conversazione una discussione sui Combinatori generali e adiacenti, che sono un altro modo interessante di indirizzare determinati elementi. Prendi il seguente codice HTML come esempio:
Ora, diciamo che volevamo scegliere come target solo il "Pick me !? paragrafo. L'Adjacent Sibling Combinator ci fa fare proprio questo. Il seguente codice si rivolge a qualsiasi p tag preceduti immediatamente da un h1 etichetta. C'è solo uno di questi nell'esempio sopra (il primo paragrafo dopo l'intestazione).
Allo stesso modo, il General Sibling Combinator ci permetterà di mirare tutti del p tag che arrivano dopo l'intestazione. Quindi quel primo paragrafo non cambierà colore, ma tutti gli altri lo faranno.
Questo è solo un assaggio, per maggiori informazioni su questi, consulta The Book of CSS3.
Supporto del browser
Come ho detto brevemente sopra, per quanto posso dire, sei abbastanza coperto da molte di queste tecniche su IE7 con tutto maggiore i browser attuali offrono un supporto perfetto. Tuttavia, non è esattamente un punteggio completo su tutta la linea con alcuni dei browser meno noti che sono un po 'chiazzati. Puoi trovare un bel tavolino di browser e il loro supporto per tutte queste cose e molto altro su dev.l-c-n.com.
Conclusione
Ad essere onesti, recentemente ho saputo poco o nulla dei selettori di attributi CSS. Dopo un po 'di ricerca, sono rimasto sbalordito da quanto sono interessanti e sconcertati dal fatto che sembrino così rari (il supporto del browser è migliore di molte delle cose con cui ci scocciamo). Con solo un po 'di codice, è possibile ottenere un targeting straordinariamente specifico con pochi o nessun markup aggiuntivo richiesto.
Lascia un commento e fammi sapere cosa pensi dei selettori di attributi e se non li usi mai o meno!