unslug it: move

1 files changed, 151 insertions, 0 deletions

diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..aece606365
--- /dev/null
+++ b/files/it/conflicting/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,151 @@
+---
+title: I Selettori
+slug: Conoscere_i_CSS/I_Selettori
+tags:
+  - Conoscere_i_CSS
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Web/Guide/CSS/Getting_started/Selectors
+---
+<p>
+</p><p>Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza.
+</p><p>Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio
+</p>
+<h3 id="Informazioni:_I_Selettori" name="Informazioni:_I_Selettori"> Informazioni: I Selettori </h3>
+<p>I CSS hanno una terminologia propria per descrivere il linguaggio CSS.
+Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa:
+</p>
+<div style="width: 30em;"><pre>strong {color: red;}
+</pre></div>
+<p>Nella terminologia dei CSS l'intera stringa è una <i>regola</i> (rule). La regola inizia con <code>strong</code>, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola.
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> La parte contenuta all'interno delle parentesi graffe è la <i>dichiarazione</i> (declaration).
+<p>La parola chiave <code>color</code> è una <i>proprietà</i> (property), e <code>red</code> è un <i>valore</i>(value).
+</p><p>Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione.
+</p><p>Questa guida si riferirà ai selettori del tipo di <code>strong</code> come a dei selettori <i>tag</i>.
+Le specifiche dei CSS vi si riferiscono invece come a dei selettori di <i>tipo</i>.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS.
+</p><p>In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico.
+</p><p>Esistono due attributi che hanno uno status speciale nei CSS: <code>class</code> e <code>id</code>.
+</p><p>L'attributo <code>class</code> di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe.
+</p><p>Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore.
+</p><p>L'attributo <code>id</code> di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento.
+</p><p>Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#).
+</p>
+<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;">
+<caption>Esempi
+</caption><tbody><tr>
+<td> Questo tag HTML ha sia un attributo <code>class</code> che uno <code>id</code>:
+<div style="width: 30em;"><pre>
+&lt;P class="key" id="principal"&gt;
+</pre></div>
+<p>L'id "<code>principal</code>" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo <code>class</code>.
+</p><p>In un foglio di stile questa regola rende tutti gli elementi della classe <code>key</code> verdi.
+(Potrebbero anche non essere tutti elementi di tipo <small>P</small>.)
+</p>
+<div style="width: 30em;"><pre>
+.key {color: green;}
+</pre></div>
+<p>Questa regola rende l'unico elemento con l'id <code>principal</code> in grassetto:
+</p>
+<div style="width: 30em;"><pre>
+#principal {font-weight: bolder;}
+</pre></div>
+</td></tr></tbody></table>
+<p><br>
+Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore <code>id</code> è più specifico di un selettore <code>class</code>, che però è più specifico di un selettore di tipo "tag".
+</p>
+<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
+<caption>Di più...
+</caption><tbody><tr>
+<td> I selettori possono anche essere combinati così da essere resi più specifici.
+<p>Per esempio, il selettore <code>.key</code> seleziona tutti gli elementi che hanno l'attributo <code>class</code> con il valore <code>key</code>. Il selettore <code>p.key</code> seleziona solo gli elementi P che abbiano il valore <code>key</code> all'attributo <code>class</code>.
+</p><p>Non si è limitati ai due attributi speciali, <code>class</code> e <code>id</code>. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore <code>{{ mediawiki.external('type=button') }}</code> seleziona tutti gli elementi che hanno l'attributo <code>type</code> con il valore <code>button</code> assegnato.
+</p><p>Più avanti in questa guida, la pagina sulle (<a href="it/Conoscere_i_CSS/Tabelle">Tabelle</a>) contiene informazioni sui selettori complessi basati sulle relazioni.
+</p><p>Per informazioni complete sui selettori, consulta "<a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selettori</a>" nelle specifiche CSS.
+</p>
+</td></tr></tbody></table>
+<p><br>
+Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile.
+</p><p>Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità.
+</p>
+<h3 id="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22" name="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22"> Azione: Utilizzare i selettori "class" e "id" </h3>
+<p>Apri il file HTML e duplica il paragrafo facendo copia/incolla.
+Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file:
+</p>
+<div style="width: 48em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+  &lt;HEAD&gt;
+  &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
+  &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
+  &lt;/HEAD&gt;
+  &lt;BODY&gt;
+    &lt;P <strong style="color: black;">id="first"</strong>&gt;
+      &lt;STRONG <strong style="color: black;">class="carrot"</strong>&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;
+    <strong style="color: black;">&lt;P id="second"&gt;
+      &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+      &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+      &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+    &lt;/P&gt;</strong>
+  &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>Ora apri il file CSS. Sostituisci l'intero contenuto con:
+</p>
+<div style="width: 40em;"><pre>strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+</pre></div>
+<p>Aggiorna il browser per vedere il risultato:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p><br>
+Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso.
+</p><p>I selettori di classe <code>.carrot</code> e <code>.spinach</code> hanno sempre la priorità su il selettore di tag <code>strong</code>.
+</p><p>Il selettore di id <code>#first</code> ha sempre la priorità sui selettori di classe e di tag.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+<caption>Esercizi
+</caption><tbody><tr>
+<td> Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu:
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+<p>Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu:
+</p>
+<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+<tbody><tr>
+<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
+</td></tr>
+<tr>
+<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
+</td></tr></tbody></table>
+</td></tr></tbody></table>
+<p><br>
+</p>
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
+</p><p>Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere:
+<b><a href="it/Conoscere_i_CSS/CSS_leggibili">CSS leggibili</a></b>
+</p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}