28234 sujets

CSS et mise en forme, CSS3

[Résolu] Cibler un paragraphe particulier

Bonjour,

Dans ce conteneur, je voudrais que parmi les 4 paragraphes, un seul soit avec un text-align center et rouge.
La seule solution consiste-t-elle à créer une classe appropriée et à l'affecter au paragraphe choisi ou bien est-il possible de le faire différemment? avec un sélecteur (que je n'ai pas trouvé)
Par exemple.


<style type="text/css">
#essai{ width:500px; background-color:#666;text-align:center; }
#essai p{
	width:300px; 
	font-family:Verdana, Geneva, sans-serif; font-size:15px;
	text-align:justify; 
	background-color:#999
	}
#essai p.left{ text-align:center; color:#F00}
</style>

<div id="essai">
  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
  <p>Paragraphe 3</p>
  <p class="left" >Paragraphe 4</p>
</div>


merci!
Bonjour,

Cela devrait dépendre de ton besoin de (rétro)-compatibilité, mais il a différentes manières de procéder, je t'invite à regarder cet exemple, à supprimer ou rajouter des règles pour comprendre le mécanisme :
http://dabblet.com/gist/5608113

@+
merci pour ta réponse rapide mais je sèche.

j'essaye ça mais ça ne donne rien. Quelque chose doit m'échapper.


<style type="text/css">
#essai{ width:500px; background-color:#666;text-align:center; }
#essai p{
	width:300px; 
	font-family:Verdana, Geneva, sans-serif; font-size:15px;
	text-align:justify; 
	background-color:#999
	}
#essai p:last-child {background-color:#565656;text-align:right;}
</style>

<div id="essai">
  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
  <p>Paragraphe 3</p>
  <p class="left" >Paragraphe 4</p>
</div>

Modifié par kayorn (19 May 2013 - 18:51)
je testais dans ie9...

ça marche ok dans firefox/opera/safari

on sera toujours e******s avec IE?

je mettrai un commentaire pour ie

merci!
Modifié par kayorn (19 May 2013 - 20:47)
kayorn a écrit :
je testais dans ie9...

A priori cela doit fonctionner dans IE9... tu as peut-être un problème avec le mode de compatibilité ?!

Ceci étant dit :
p:first-child + p + p + p
&
p + p + p + p

Devraient fonctionner dès IE7 me semble t-il
Avec l'utilisation du sélecteur de frère adjacent (+) tu cibles toujours le 4ème paragraphe sur 4 paragraphes présents, mais si tu as 5 paragraphes (ou plus), le 5ème (ou tout les autres paragraphes qui suivent) héritera(ont) également des propriétés définies....

Pour clore sur le sujet, ton premier exemple est parfaitement fonctionnel et ce dès IE6 me semble t-il, et ne pose pas de problème particulier Smiley cligne
hello,
cela t'as bien été expliqué. Je pense que celui marcherait sur tous les navigateurs est le sélecteur d'adjacence directe "+" ou comme tu as écrit dans ton exemple.

#essai p+p+p+p {}

 /* ie9+ */

#essai:nth-child(4) {}

#essai:nth-of-type(4) {}

#essai:last-child {}

#essai:last-of-type {}
J'ai finalement opté pour p+p+p

Seul marchait : #essai:last-of-type {}

Merci à vous, j'avance difficilement mais j'avance. Smiley cligne
Sujet clos
Aller à