diff options
Diffstat (limited to 'files/it/web/css/_colon_active/index.html')
| -rw-r--r-- | files/it/web/css/_colon_active/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/files/it/web/css/_colon_active/index.html b/files/it/web/css/_colon_active/index.html new file mode 100644 index 0000000000..450e457c4a --- /dev/null +++ b/files/it/web/css/_colon_active/index.html @@ -0,0 +1,128 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:active</code></strong> rappresenta un elemento (come un bottone) che viene attivato dall'utente.</span> Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.</p> + +<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi <a> che viene attivato */ +a:active { + color: red; +}</pre> + +<p>La pseudo-class <code>:active</code> è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che <em>contengono</em> un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.</p> + +<p>Gli stili definiti dalla pseudo-class <code>:active</code> saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link ({{cssxref(":link")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola <code>:active</code> dopo tutte le altre regole relative ai link, così come definito dall'ordine <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota:</strong> Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class <code>:active</code> deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Link_attivi">Link attivi</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Questo paragrafo contiene un link: + <a href="#">Questo link diventerà rosso quando viene cliccato.</a> + Il paragrafo avrà uno sfondo grigio mentre se se si clicca su di esso o sul link. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a:link { color: blue; } /* links non visitati */ +a:visited { color: purple; } /* links visitati */ +a:hover { background: yellow; } /* links su cui si passa sopra */ +a:active { color: red; } /* links attivi */ + +p:active { background: #eee; } /* paragrafi attivi */</pre> + +<h4 id="Risultato">Risultato</h4> + +<p>{{EmbedLiveSample('Active_links')}}</p> + +<h3 id="Elementi_form_attivi">Elementi form attivi</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><form> + <label for="my-button">Mio bottone: </label> + <button id="my-button" type="button"> Prova a cliccare su di me o sulla mia label!</button> +</form></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">form:active { + color: red; +} + +form button { + background: white; +}</pre> + +<h4 id="Risultato_2">Risultato</h4> + +<p>{{EmbedLiveSample('Active_form_elements')}}</p> + +<h2 id="Specifiche"><span>Specifiche</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Nessun Cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Nessun Cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Nessun Cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div> +<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.active")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}</li> +</ul> |