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, 0 insertions, 239 deletions
diff --git a/files/it/web/css/attribute_selectors/index.html b/files/it/web/css/attribute_selectors/index.html deleted file mode 100644 index 05617722a3..0000000000 --- a/files/it/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -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> |