Facebook-f Youtube Instagram

Selettori di attributo

di

3.38

Vediamo i Selettori di Attributo

I selettori di attributo hanno la funzione di individuare gli elementi in base ai loro attributi e ai valori di tali attributi.

Nella specifica CSS 2.1, sono definiti quattro tipi di selettori di attributo, mentre CSS3 ne introduce altri tre.

Selezione in base alla presenza di un attributo: Il primo tipo di selettore di attributo seleziona tutti gli elementi che contengono un determinato attributo nell’HTML, indipendentemente dal valore di quell’attributo.

Sintassi ed esempi: La sintassi per questa tipologia è la seguente:

css
elemento[attributo] {dichiarazioni;}

Il nome dell’attributo è racchiuso tra parentesi quadre, senza virgolette. Non va lasciato spazio tra il nome dell’elemento e la definizione dell’attributo.

Ad esempio, la seguente regola assegna il colore bianco (white) e la sottolineatura a tutti gli elementi che contengono un attributo “title”:

css
a[title] {color: white; text-decoration: underline;}

In un documento HTML, solo il primo e il terzo link rispettano questa regola:

html
<p>Ecco un <a href="#" title="link">link</a>.</p> <p>Ancora un <a href="#">link</a> ma senza l'attributo title.</p> <p>Un altro <a href="#" title="">link</a>, con title vuoto.</p> <p>Ultimo <a href="#" titles="link">link</a>.</p>

Alcune osservazioni:

  • Il secondo link non rispetta il selettore perché non ha un attributo “title”.
  • Il terzo link rispetta il selettore anche se l’attributo è vuoto.
  • Il quarto link non rispetta il selettore perché il nome dell’attributo non coincide con quello specificato nella regola CSS.

Selezione con valore corrispondente: Questo tipo di selettore individua tutti gli elementi che hanno un attributo con un valore specifico corrispondente alla stringa di testo specificata nella regola CSS.

Sintassi ed esempi: La sintassi generica è la seguente:

css
elemento[attributo="valore"] {dichiarazioni;}

La stringa del “valore” deve essere racchiusa tra virgolette, soprattutto se contiene spazi o più parole.

Ad esempio, la seguente regola seleziona solo il primo link:

css
a[title="lorem ipsum"] {color: white; text-decoration: underline;}

Nel documento HTML, solo il primo link rispetta questa regola:

html
<p>Ecco un <a href="#" title="lorem ipsum">link</a>.</p> <p>Ancora un <a href="#" title="link">link</a>.</p> <p>Un altro <a href="#" title="loremipsum">link</a>.</p> <p>Ultimo <a href="#" title="LOREM IPSUM">link</a>.</p>

Le ragioni sono spiegate nel testo.

Selezione in base a valori che contengono una stringa: Questo tipo di selettore individua tutti gli elementi con un attributo che contiene una lista di parole separate da spazi, una delle quali corrisponde al valore specificato nella regola CSS.

Sintassi ed esempio: La sintassi di base è la seguente:

css
elemento[attributo~="valore"] {dichiarazioni;}

La tilde (~) è usata prima del segno =.

Ad esempio, la seguente regola seleziona solo il primo e il secondo link:

css
a[title~="lorem"] {color: white; text-decoration: underline;}

Nel documento HTML, la regola verrà applicata solo ai primi due link:

html
<p>Ecco un <a href="#" title="lorem ipsum sit">link</a>.</p> <p>Ancora un <a href="#" title="link lorem">link</a>.</p> <p>Un altro <a href="#" title="ipsum sit">link</a>.</p> <p>Ultimo <a href="#" title="LOREM link">link</a>.</p>

Le ragioni sono spiegate nel testo.

Selezione in base a valori che iniziano con una certa stringa: Questo selettore individua gli elementi in cui un attributo contiene una lista di parole separate da trattini, di cui una corrisponde al valore specificato nella regola CSS.

Sintassi ed esempio: La sintassi generica è questa:

css
elemento[attributo|="valore"] {dichiarazioni;}

Questo tipo di selettore è poco utilizzato e seleziona solo il primo link:

html
<p>Ecco un <a href="#" title="lorem-ipsum-dolor">link</a>.</p> <p>Ancora un <a href="#" title="ipsum-lorem-dolor">link</a>.</p>

Tali selettori possono risultare utili in diverse situazioni, a seconda delle esigenze di stile e di design del sito web.

Cosa Cambia nei CSS3

I selettori di attributo forniscono la possibilità di selezionare gli elementi all’interno di una pagina web in base ai loro attributi e applicare uno stile specifico. Questo evita la necessità di assegnare classi o identificatori (id) agli elementi.

Per iniziare, esamineremo i diversi tipi di selettori di attributo che saranno oggetto di questa lezione. Ecco l’elenco completo:

  1. E[attributo]
  2. E[attributo=valore]
  3. E[attributo~=valore]
  4. E[attributo|=valore]
  5. E[attributo^=valore]
  6. E[attributo$=valore]
  7. E[attributo*=valore]

I primi quattro selettori sono stati introdotti nella versione 2.1 dei CSS, mentre gli ultimi tre sono nuovi e introdotti nella versione 3 dei CSS.

  1. E[attributo]: Questo selettore individua tutti gli elementi E che possiedono l’attributo attributo, indipendentemente dal contenuto dell’attributo.

    Ad esempio:

    css
    a[title] { color: blue; text-decoration: underline; }

    Questo stile verrà applicato a tutti gli elementi <a> che hanno un attributo title. Anche se l’attributo title è vuoto o ha diversi valori, lo stile verrà applicato.

  2. E[attributo=valore]: Questo selettore individua tutti gli elementi E che hanno l’attributo attributo con un valore esattamente uguale a valore.

    Ad esempio:

    css
    a[title="Lorem"] { color: blue; text-decoration: underline; }

    Questo stile verrà applicato solo agli elementi <a> con un attributo title il cui valore è esattamente “Lorem”. La corrispondenza non è case-sensitive.

  3. E[attributo~=valore]: Questo selettore individua tutti gli elementi E con l’attributo attributo che contiene una lista di parole separate da spazi, una delle quali è esattamente uguale a valore.

    Ad esempio:

    css
    a[title~="dolor"] { color: blue; text-decoration: underline; }

    Questo stile verrà applicato a tutti gli elementi <a> con un attributo title che contiene una lista di parole, una delle quali è “dolor”. La corrispondenza non è case-sensitive.

  4. E[attributo|=valore]: Questo selettore è simile al precedente, ma il valore valore deve essere separato da trattini (-) all’interno dell’attributo attributo.

    Ad esempio:

    css
    a[title|="Lorem"] { color: blue; text-decoration: underline; }

    Questo stile verrà applicato a tutti gli elementi <a> con un attributo title che inizia con “Lorem” seguito da un trattino. La corrispondenza non è case-sensitive.

  5. E[attributo^=valore]: Questo selettore individua tutti gli elementi E con l’attributo attributo che inizia esattamente con il valore valore.

    Ad esempio:

    css
    a[title^="Lorem"] { color: blue; text-decoration: underline; }

    Questo stile verrà applicato a tutti gli elementi <a> con un attributo title che inizia con “Lorem”. La corrispondenza non è case-sensitive.

  6. E[attributo$=valore]: Questo selettore è simile al precedente, ma il valore valore deve trovarsi alla fine dell’attributo attributo.

    Ad esempio:

    css
    a[title$="amet"] { color: blue; text-decoration: underline; }

    Questo stile verrà applicato a tutti gli elementi <a> con un attributo title il cui valore termina con “amet”. La corrispondenza non è case-sensitive.

  7. E[attributo*=valore]: Questo selettore individua tutti gli elementi E con l’attributo attributo che contiene il valore valore ovunque all’interno dell’attributo.

    Ad esempio:

    css
    a[title*="dolor"] { color: blue; text-decoration: underline; }

    Questo stile verrà applicato a tutti gli elementi <a> con un attributo title che contiene la parola “dolor” in qualsiasi posizione all’interno dell’attributo. La corrispondenza non è case-sensitive.

Questi selettori consentono una maggiore flessibilità nella selezione degli elementi in base ai loro attributi e ai valori contenuti in essi, rendendo più potenti e versatili le regole CSS.

Lascia un commento