IE e selettori

[GunraY]

Ciao a tutti.
Sto usando l'image replacement per sostituire gli h1 con delle immagini. Quindi ho creato tre immagini per le pagine profilo, servizi, contatti.
come scrivere il css per sotituire con tre immagini diverse i relativi h1?
mi spiego, codice css:
h1[id="profilo"]{
background: url(img/profilo.jpg) no-repeat top left;
margin-top: 10px;
width: 217px;
height: 66px;
float: left;
clear:both;
}
h1 span{
display: block;
width: 0; height: 0; line-height: 0; /* attribuisce dimensioni nulle */
overflow: hidden; clip: rect(0,0,0,0); /* nasconde il testo */
}

ho usato h1[id="profilo"] , ma funziona solo con firefox. ie non lo vede. d'altronde, se uso solo h1{...} mi rimpiazza TUTTI gli h1 con la stessa immagine, mentre io voglio usare tre img diverse, a seconda delle pagine. suggerimenti?

[jesus]

h1#profilo {
  ...
}

[GunraY]

scusate, sono un pollo, ho usato una classe e il gioco è fatto!

[pierofix]

Esiste un'abbreviazione per selezionare id e class nel css, ovvero rispettivamente "#" e ".".

Esempio:

<span id="micio">Miciomiciomicio</span>
<span class="mucchina">Muuu</span>

#micio {}
.mucchina {}

[GunraY]

in quella maniera invece di <h1 class="profilo">...</h1> dovrei usare <h1 id="profilo">...</h1> giusto?

[jesus]

Originariamente inviato da GunraY
in quella maniera invece di <h1 class="profilo">...</h1> dovrei usare <h1 id="profilo">...</h1> giusto?

Esatto. O se vuoi utilizzare la classe:

h1.profilo {
  ....
}

<h1 class="profilo">Titolo</h1>

[pierofix]

Id e class sono due cose ben distinte: il primo ti permette di definire univocamente un elemento, e quindi andrebbe usato per oggetti ben definiti; il secondo ti permette di identificare una famiglia di elementi, i quali possiedono tutti caratteristiche in comune.

Insomma, dipende dal contesto. Basta che ci ragioni su e trovi subito la risposta giusta.

[GunraY]

beh, in quetso caso specifico userò
h1#profilo{background: url(img/profilo.jpg) no-repeat top left;}
h1#servizi{background: url(img/servizi.jpg) no-repeat top left;}
h1{
margin-top: 10px;
width: 217px;
height: 66px;
float: left;
clear:both;
}
, ma se invece di h1#profilo e h1#servizi usassi h1.profilo e h1.servizi il risultato sarebbe lo stesso... non riesco a capire la differenza. su html.it c'è scritto "La strategia dovrà dunque essere questa. Se uno stile va applicato ad un solo specifico elemento usate un ID. Se invece prevedete di usarlo più volte ovvero su più elementi definite nel CSS una classe."
quindi immagino voglia dire: usa una classe, tipo .testorosso{...}, se vuoi avere la possibilità di usare il testo rosso sia nei

che negli <h1> che <h2> che... ecc.
invece gli id servono per singoli elementi, quindi in questo caso (il mio) sarebbe più corretto usare gli id, anche se con le classi otterrei lo stesso effetto... giusto?

[pierofix]

Sì.

Un id è un identificatore univoco, quindi lo puoi usare solo una volta nel documento. Puoi ad esempio avere id tipo #testata, #navigazione, #titolo, ecc., ma non potrai avere due elementi con id="titolo" in una stessa pagina.

Una stessa classe, invece, la puoi applicare a più elementi distinti nella stessa pagina. Ad esempio:

<ul class="importante">[*]Uno[*]Due[/list]
<p class="importante">Ciao!</p>

.importante {
   color:red;
}

[GunraY]

Grazie! Ci andavo a "intuito", ora ho molta più chiarezza!