diff options
Diffstat (limited to 'files/it/web/css/attribute_selectors/index.html')
| -rw-r--r-- | files/it/web/css/attribute_selectors/index.html | 239 |
1 files changed, 239 insertions, 0 deletions
diff --git a/files/it/web/css/attribute_selectors/index.html b/files/it/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..05617722a3 --- /dev/null +++ b/files/it/web/css/attribute_selectors/index.html @@ -0,0 +1,239 @@ +--- +title: Attribute selectors +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selettori + - Selettori di attributo +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p>Il <strong>selettore di attributo</strong> CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.</p> + +<pre class="brush: css no-line-numbers">/* Elemento <a> con un attributo title */ +a[title] { + color: purple; +} + +/* Elemento <a> con un href uguale a "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* Elemento <a> con un href contenente "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* Elemento <a> con un href che finisce con ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* Elemento <a> il cui attributo classe contiene la parola "logo" */ +a[class~="logo"] { + padding: 2px; +}</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em>.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è esattamente <em>value</em>.</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è una lista di parole separate da spazi, una delle quali è esattamente <em>value</em>.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore può essere esattamente <em>value</em> o può iniziare con <em>value</em> immediatamente seguito da un trattino, <code>-</code> (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è il prefisso (è preceduto da) di <em>value</em>.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è il suffisso (è seguito da) di <em>value</em>.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore contiene almeno una presenza di <em>value</em> all'interno della stringa.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>Aggiungere una <code>i</code> (o <code>I</code>) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).</dd> + <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> + <dd>Aggiungere una <code>s</code> (o <code>S</code>) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Links">Links</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Link interni che iniziano con "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Link con "example" in qualsiasi punto dell'URL */ +a[href*="example"] { + background-color: silver; +} + +/* Link con "insensitive" in qualsiasi punto dell'URL, + a prescindere dalla capitalizzazione*/ +a[href*="insensitive" i] { + color: cyan; +} + +/* Link con "cAsE" in qualsiasi punto dell'URL, +con precisa capitalizzazione */ +a[href*="cAsE" s] { + color: pink; +} + +/* Link che finiscono con ".org" */ +a[href$=".org"] { + color: red; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="Risultato">Risultato</h4> + +<p>{{EmbedLiveSample("Links")}}</p> + +<h3 id="Linguaggi">Linguaggi</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Tutti i div con attributo `lang` sono bold. */ +div[lang] { + font-weight: bold; +} + +/* Tutti i div senza un attributo `lang` sono italicized. */ +div:not([lang]) { + <span class="st">font-style: italic;</span> +} + +/* Tutti i div in Inglese US sono blu. */ +div[lang~="en-us"] { + color: blue; +} + +/* Tutti i div in Portoghese sono verdi. */ +div[lang="pt"] { + color: green; +} + +/* Tutti i div in Cinese sono rossi, sia che siano + in cinese semplificato (zh-CN) o tradizionale (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* Tutti i div con un + `data-lang` in Cinese tradizionale sono viola. */ +/* Nota: Gli attributi con trattino possono essere usati + senza virgolette */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div> +</pre> + +<h4 id="Risultati">Risultati</h4> + +<p>{{EmbedLiveSample("Languages")}}</p> + +<h3 id="Liste_ordinate_HTML">Liste ordinate HTML</h3> + +<p>La specifica HTML richiede che l'attributo {{htmlattrxref("type", "input")}} venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML {{HTMLElement("input")}}, provare ad usare selettori di attributo con l'attributo {{htmlattrxref("type", "ol")}} di un {{HTMLElement("ol", "ordered list")}} non funziona senza il modificatore <a href="#case-sensitive">case-sensitive</a>.</p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */ +ol[type="a"] { + list-style-type: lower-alpha; + background: red; +} + +ol[type="a" s] { + list-style-type: lower-alpha; + background: lime; +} + +ol[type="A" s] { + list-style-type: upper-alpha; + background: lime; +}</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><ol type="A"> + <li>Example list</li> +</ol></pre> + +<h4 id="Risultato_2">Risultato</h4> + +<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div> + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{CSSxRef("attr")}}</li> + <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li> + <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li> + <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li> +</ul> |