28172 sujets

CSS et mise en forme, CSS3

Problème de first-child

Bonjour,

Pour la mise en page d'un blog, je souhaiterais personnaliser l'affichage du premier paragraphe de chaque article.

Dans le code, l'article et les paragraphes suivent cet exemple :


<div class="post-content">
<p>...</p>
<p>...</p>
<p>...</p>
</div>


Dans mon CSS, j'ai donc mis ceci :

.post-content p:first-child { font-style: italic; }


J'ai aussi testé ceci :

.dc-post .post-content p:first-child { font-style: italic; }


Mais rien n'y fait, ça ne fonctionne pas...

J'ai également tenté ça :

p:first-child { font-style: italic; }


Et dans ce cas, seul le <p>...</p> contenu dans une autre div se met en italique...

Pourriez-vous me mettre sur la bonne piste pour corriger mon souci ?
Merci pour votre aide !

Exemple concret :
http://temperatureideale.fr/post/quels-sont-causes-et-consequences-trop-forte-humidite
En réalité, lorsque je tente ça :

p:first-child { font-style: italic; }


Tous les premiers <p>...</p> des div se retrouvent bien en italique, SAUF la div que je voudrais, c'est à dire ce qui est dans le .post-content.

.dc-post p.post-content:first-child { font-style: italic; }


Ne marche pas non plus...
Essaie avec le sélecteur d'enfant: 

.dc-post > p:first-child { font-style: italic; }


EDIT: au temps pour moi.
Modifié par jmlapam (26 Oct 2011 - 21:41)
.dc-post c'est la class du body, tu confonds pas avec la class post-content?
Modifié par jmlapam (26 Oct 2011 - 21:24)
Bonjour,

En l'occurrence il y a une image juste avant ton paragraphe, donc ta structure ressemble à ceci:
<div class="post-content">
  <img />
  <p>...</p>
  <p>...</p>
  ...
</div>

Il n'y a donc dans ce bloc aucun paragraphe qui soit le premier enfant de son parent (ici le premier enfant c'est l'élément IMG).

En gardant la même structure, un sélecteur qui peut marcher c'est:
.post-content > p:first-of-type {}

Par contre le support dans IE ça sera à partir d'IE9 uniquement.

Kysban a écrit :
.dc-post p.post-content:first-child { font-style: italic; }

Comment est-ce que tu peux même tenter ce sélecteur, dont la partie p.post-content signifie «tout élément P qui a pour classe "post-content"», alors que tu vois bien dans ton code HTML que c'est un élément DIV qui porte la classe "post-content" et pas un élément P?

Faire des essais c'est bien, mais apprendre les sélecteurs CSS plutôt que d'y aller à l'aveugle c'est mieux. Smiley cligne

jmlapam a écrit :
Le sélecteur first-child permet de spécifier le style de la première ligne d'un bloc.

Hmm non. Tu confonds peut-être avec :first-line?
Je te remercie, ça fonctionne !

Désolé si certains de mes essais sont absurdes, j'essaye d'apprendre et d'être cohérent, mais parfois, quand on a passé plus d'une heure sur un problème, on finit par tenter des trucs improbables...

Par exemple, je possède le Memento CSS3 que j'ai acheté il y a quelques mois. Ca m'a beaucoup permis d'avancer mais j'avoue que j'apprends en fonction des obstacles que je rencontre (et là pour le coup, c'est tout neuf pour moi).
Sujet clos
Aller à