I Selettori

  • Revision slug: Conoscere_i_CSS/I_Selettori
  • Revision title: I Selettori
  • Revision id: 194442
  • Created:
  • Creator: Indigo
  • Is current revision? No
  • Comment /* Informazioni: I selettori */

Revision Content

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 l0intera 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.


This page of the tutorial explains more about the selectors that you can use in CSS rules.

In addition to tag names, you can use attribute values in selectors. This allows your rules to be more specific.

Two attributes have special status for CSS. They are class and id.

Use the class attribute in a tag to assign the tag to a named class. It is up to you what name you choose for the class.

In your stylesheet, type a full stop (period) before the class name when you use it in a selector.

Use the id attribute in a tag to assign an id to the tag. It is up to you what name you choose for the id. The id name must be unique in the document.

In your stylesheet, type a number sign (hash) before the id when you use it in a selector.

Examples
This HTML tag has both a class attribute and an id attribute:
<P class="key" id="principal">

The id, principal, must be unique in the document, but other tags in the document can have the same class name, key.

In a CSS stylesheet, this rule makes all the elements in the class key green. (They might not all be P elements.)

.key {color: green;}

This rule makes the one element with the id principal bold:

#principal {font-weight: bolder;}


If more than one rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector. An id selector is more specific than a class selector, which in turn is more specific than a tag selector.

More details
You can also combine selectors, making a more specific selector.

For example, the selector .key selects all elements that have the class name key. The selector p.key selects only P elements that have the class name key.

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" } ) }}

Revision Source

<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 l0intera 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>
This page of the tutorial explains more about the selectors that you can use in CSS rules.
</p><p>In addition to tag names, you can use attribute values in selectors.  This allows your rules to be more specific.
</p><p>Two attributes have special status for CSS.  They are <code>class</code> and <code>id</code>.
</p><p>Use the <code>class</code> attribute in a tag to assign the tag to a named class.  It is up to you what name you choose for the class.
</p><p>In your stylesheet, type a full stop (period) before the class name when you use it in a selector.
</p><p>Use the <code>id</code> attribute in a tag to assign an id to the tag.  It is up to you what name you choose for the id.  The id name must be unique in the document.
</p><p>In your stylesheet, type a number sign (hash) before the id when you use it in a selector.
</p>
<table style="border:1px solid #36b; background-color:#ffe; padding:1em;">
<caption style="font-weight:bold; text-align:left;">Examples
</caption><tbody><tr>
<td> This HTML tag has both a <code>class</code> attribute and an <code>id</code> attribute:
<div style="width: 30em;"><pre>
&lt;P class="key" id="principal"&gt;
</pre></div>
<p>The id, <code>principal</code>, must be unique in the document, but other tags in the document can have the same class name, <code>key</code>.
</p><p>In a CSS stylesheet, this rule makes all the elements in the class <code>key</code> green.
(They might not all be <small>P</small> elements.)
</p>
<div style="width: 30em;"><pre>
.key {color: green;}
</pre></div>
<p>This rule makes the one element with the id <code>principal</code> bold:
</p>
<div style="width: 30em;"><pre>
#principal {font-weight: bolder;}
</pre></div>
</td></tr></tbody></table>
<p><br>
If more than one rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector.  An id selector is more specific than a class selector, which in turn is more specific than a tag selector.
</p>
<table style="border:1px solid #36b; background-color:#f4f4f4; padding:1em;">
<caption style="font-weight:bold; text-align:left;">More details
</caption><tbody><tr>
<td> You can also combine selectors, making a more specific selector.
<p>For example, the selector <code>.key</code> selects all elements that have the class name <code>key</code>.  The selector <code>p.key</code> selects only P elements that have the class name <code>key</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" } ) }}
Revert to this revision