Discussion :

[L'aigle de Carthage]

Bonsoir à toutes et à tous,

Je suis en train de tester le CSS3 et j'ai ce bout de code HTML suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <section>
      <h3>Méthode d'effacement</h3>
      <p>Comme toutes les colonnes sont flottantes, cette mise en page utilise une déclaration clear:both dans la règle .footer. Cette technique d'effacement force le.... </p></section>

Et j'ai crée, par la suite, une feuille de style CSS, comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
h3 p {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #C06;
}

Je voulais dire, que pour le contenu de <p> sous <h3>, je veux avoir un font-family= Georgia, "Times New Roman" + couleur = #C06 ... Mais ça ne change rien dans mon site !!!

J'ai pas compris ou est la faute? , malgré que je suis sûr que l'appel de la page est juste...


Merci

[Bovino]

Les sélecteurs CSS, c'est un peu la base... Tu devrais peut-être les revoir...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

h3 p {...}

Coorespond aux balises <p> contenues dans une balise <h3>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
h3 + p{...}
h3 ~ p{...}

correspondent à des sélecteurs de frères.

[L'aigle de Carthage]

D'accord, mais pk si je fais comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
h3 > p {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #C06;
}

ça ne fonctionne pas, malgré que dans certains tutos, cette instruction fonctionne, exp:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#maincontent > p{
       text-indent:30px;
}

Hypothèse à ma question: Parce que dans le deuxième cas, je manipule des ID et non pas des balises?

Est ce vrai?

Autrement dis, c'est quoi la différence entre > et + dans ce cas?

[polymorphisme]

Bonjour,

h3 > p

Le sélecteur &gt; s'applique aux éléments p dont le parent est un élément h3.
Or un élément h3 n'a pas d'enfant p.
Donc le style n'est pas appliqué.

#maincontent > p

Dans ce cas, les styles de la déclaration de ta règle s'appliquent aux éléments p dont le parent est l'élément identifié par la chaîne "maincontent".
A priori, l'élément identifié est un élément div, qui peut contenir des éléments p.
Donc le style s'applique.

[Muchos]

@L'aigle de Carthage :

Les règles sont simples, non ? ò_ó

Sélecteurs pour parents/enfants

• bar foo: Tout élément FOO enfant (tous niveaux) de BAR
• bar > foo: Tout élément FOO immédiatement enfant de BAR
• bar * foo: Tout élément FOO petit-enfant de BAR

Sélecteurs pour frères

• bar ~ foo: Tout élément FOO précédé d'un frère BAR
• bar + foo: Tout élément FOO immédiatement précédé d'un frère BAR

Donc, arrêtons de faire les foo. Point bar.

[L'aigle de Carthage]

Merci beaucoup les gars pour ce magnifique éclaircissement