diff options
Diffstat (limited to 'files/it/learn/css/building_blocks/selettori/index.html')
| -rw-r--r-- | files/it/learn/css/building_blocks/selettori/index.html | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selettori/index.html @@ -0,0 +1,231 @@ +--- +title: selettori CSS +slug: Learn/CSS/Building_blocks/Selettori +tags: + - Attributo + - CSS + - Classe + - Impara + - Principiante + - Pseudo + - Selettori +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscenze informatiche di base, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">istallazione di software fondamentali</a>, conoscenze base di <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">gestione dei file</a>, basi di HTML (vedi <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione ad HTML</a>) ed avere un'idea di base di come funzionano i CDD (vedi <a href="/en-US/docs/Learn/CSS/First_steps">primi passi con i CSS</a>).</td> + </tr> + <tr> + <th scope="row">Obbiettivo:</th> + <td>Apprendere nel dettaglio il funzionamento dei selettori CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Cosé_un_selettore">Cos'é un selettore?</h2> + +<p>Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come <em>soggetto del selettore</em>.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi <code>h1</code> oppure una classe come <code>.special</code>.</p> + +<p>Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> (specifica sui selettori di livello 3), la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.</p> + +<h2 id="Liste_di_selettori">Liste di selettori</h2> + +<p>Nel caso in cui tu abbia piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un <code>h1</code> ed anche per la classe <code>.special</code>, potrei scriverlo nel seguente modo.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.</p> + +<p>Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore <code>h1</code> non presenta errori e la sua dichiarazione verrá eseguita correttamente.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>Tuttavia se combinati, né il selettore <code>h1</code> né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Tipi_di_selettori">Tipi di selettori</h2> + +<p>I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.</p> + +<h3 id="Selettori_di_tipo_classe_e_ID">Selettori di tipo, classe e ID</h3> + +<p>Questo gruppo include i selettori usati per gli elementi della pagina HTML come <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>Include inoltre i selettori di classe:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>oppure di ID:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Selettori_di_attributo">Selettori di attributo</h3> + +<p>Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classi_e_pseudo-elementi">Pseudo-classi e pseudo-elementi</h3> + +<p>Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe <code>:hover</code> seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, <code>::first-line</code> seleziona sempre la prima riga di testo di un elemento (un elemento <code><p></code> nell'esempio seguente), come se questa fosse messa dentro un blocco <code><span></code> e selezionata.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Combinatori">Combinatori</h3> + +<p>L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <code><article></code> utilizzando il combinatore (<code>></code>):</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Prossimo_passo">Prossimo passo</h2> + +<p>Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">selettori di tipo, classe e id</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Tabella_riassuntiva_dei_selettori">Tabella riassuntiva dei selettori</h2> + +<p>La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selettore</th> + <th scope="col">Esempio</th> + <th scope="col">Tutorial sui CSS</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Type_selectors">Selettore di tipo</a></td> + <td><code>h1 { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Selettore di tipo</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td> + <td><code>* { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Selettore universale</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Class_selectors">Selettore di classe</a></td> + <td><code>.box { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Selettore di classe</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td> + <td><code>#unique { }</code></td> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">Selettore di ID</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selettore di attributo</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classi</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementi</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td> + <td><code>article p</code></td> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Combinatore di discendenza</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td> + <td><code>article > p</code></td> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Combinatore di figli</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td> + <td><code>h1 + p</code></td> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Combinatore di fratelli adiacenti</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Combinatore di fratelli generici</a></td> + </tr> + </tbody> +</table> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> |