mozilla

Revision 194443 of I Selettori

  • Slug della versione: Conoscere_i_CSS/I_Selettori
  • Titolo della versione: I Selettori
  • ID versione: 194443
  • Data di creazione
  • Autore: Indigo
  • Versione corrente? No
  • Commento /* Informazioni: I Selettori */
Etichette: 

Contenuto della versione

Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza.

Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio

Informazioni: I Selettori

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:

strong {color: red;}

Nella terminologia dei CSS l'intera stringa è una regola (rule). La regola inizia con strong, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola.

Di più...
La parte contenuta all'interno delle parentesi graffe è la dichiarazione (declaration).

La parola chiave color è una proprietà (property), e red è un valore(value).

Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione.

Questa guida si riferirà ai selettori del tipo di strong come a dei selettori tag. Le specifiche dei CSS vi si riferiscono invece come a dei selettori di tipo.


Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS.

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.

Esistono due attributi che hanno uno statuto speciale nei CSS: class e id.

L'attributo class in un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe.

Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore.

L'attributo id 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.

Nel foglio di stile il selettore id si indica anteponendo un simbolo "cancelletto" (#).

Esempi
Questo tag HTML ha sia un attributo class che uno id:
<P class="key" id="principal">

L'id, principal, deve essere unica in tutto il documento, ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso nome nell'attributo class.

In un foglio di stile, questa regola rende tutti gli elementi della classe key verdi. (Potrebbero anche non essere tutti elementi di tipo P.)

.key {color: green;}

Questa regola rende l'unico elemento con l'id principal in grassetto:

#principal {font-weight: bolder;}


Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore id è più specifico di un selettore class, che però è più specifico di un selettore di tipo "tag".

Di più...
I selettori possono anche essere combinati così da essere resi più specifici.

Per esempio, il selettore .key seleziona tutti gli elementi che hanno l'attributo class con il valore key. Il selettore p.key seleziona solo gli elementi P che abbiano il valore key all'attributo class.

You are not restricted to the two special attrbutes, class and id. You can specify other attributes by using square brackets. For example, the selector {{mediawiki.external('type=button')}} selects all elements that have a type attribute with the value button.

A later page of this tutorial (Tables) has information about complex selectors based on relationships.

For complete information on selectors, see Selectors in the CSS Specification.


If the stylesheet has conflicting rules and they are equally specific, then CSS gives priority to the rule that is later in the stylesheet.

When you have a problem with conflicting rules, try to resolve it by making one of the rules more specific, so that it has priority. If you cannot do that, try moving one of the rules nearer the end of the stylesheet so that it has priority.

Action: Using class and id selectors

Edit your HTML file, and duplicate the paragraph by copying and pasting it. Then add id and class attributes to the first copy, and an id to the second copy as shown below. Alternatively, copy and paste the entire file again:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Sample document</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css">
  </HEAD>
  <BODY>
    <P id="first">
      <STRONG class="carrot">C</STRONG>ascading
      <STRONG class="spinach">S</STRONG>tyle
      <STRONG class="spinach">S</STRONG>heets
    </P>
    <P id="second">
      <STRONG>C</STRONG>ascading
      <STRONG>S</STRONG>tyle
      <STRONG>S</STRONG>heets
    </P>
  </BODY>
</HTML>

Now edit your CSS file. Replace the entire contents with:

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}

Refresh your browser to see the result:

Cascading Style Sheets
Cascading Style Sheets


You can try rearranging the lines in your CSS file to show that the order has no effect.

The class selectors .carrot and .spinach have priority over the tag selector strong.

The id selector #first has priority over the class and tag selectors.

Challenges
Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue:
Cascading Style Sheets
Cascading Style Sheets

Now change the rule you have just added (without changing anything else), to make the first paragraph blue too:

Cascading Style Sheets
Cascading Style Sheets


What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

Your sample stylesheet is starting to look dense and complicated. The next page describes ways to make CSS easier to read: Readable CSS

{{ wiki.languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory" } ) }}

Sorgente della versione

<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 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 style="font-weight:bold; text-align:left;">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 statuto speciale nei CSS: <code>class</code> e <code>id</code>.
</p><p>L'attributo <code>class</code> in 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 un simbolo "cancelletto" (#).
</p>
<table style="border:1px solid #36b; background-color:#ffe; padding:1em;">
<caption style="font-weight:bold; text-align:left;">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 nome nell'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 style="font-weight:bold; text-align:left;">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>You are not restricted to the two special attrbutes, <code>class</code> and <code>id</code>.  You can specify other attributes by using square brackets.  For example, the selector <code>{{mediawiki.external('type=button')}}</code> selects all elements that have a <code>type</code> attribute with the value <code>button</code>.
</p><p>A later page of this tutorial (<a href="it/CSS/Getting_Started/Tables">Tables</a>) has information about complex selectors based on relationships.
</p><p>For complete information on selectors, see <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> in the CSS Specification.
</p>
</td></tr></tbody></table>
<p><br>
If the stylesheet has conflicting rules and they are equally specific, then CSS gives priority to the rule that is later in the stylesheet.
</p><p>When you have a problem with conflicting rules, try to resolve it by making one of the rules more specific, so that it has priority.  If you cannot do that, try moving one of the rules nearer the end of the stylesheet so that it has priority.
</p>
<h3 name="Action:_Using_class_and_id_selectors"> Action: Using class and id selectors </h3>
<p>Edit your HTML file, and duplicate the paragraph by copying and pasting it.
Then add id and class attributes to the first copy, and an id to the second copy as shown below.
Alternatively, copy and paste the entire file again:
</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>Now edit your CSS file.  Replace the entire contents with:
</p>
<div style="width:40em;"><pre>strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
</pre></div>
<p>Refresh your browser to see the result:
</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>
You can try rearranging the lines in your CSS file to show that the order has no effect.
</p><p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.
</p><p>The id selector <code>#first</code> has priority over the class and tag selectors.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Challenges
</caption><tbody><tr>
<td> Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue:
<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>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too:
</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 name="What_next.3F"> What next? </h4>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="Talk:it/CSS/Getting_Started/Selectors">Discussion</a> page.
</p><p>Your sample stylesheet is starting to look dense and complicated.
The next page describes ways to make CSS easier to read:
<b><a href="it/CSS/Getting_Started/Readable_CSS">Readable CSS</a></b>
</p>{{ wiki.languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory" } ) }}
Ripristina questa versione