articles separator ( :last-child )

Estillia
Les bases HTML/CSS

Bonjour à tous !

J'ai ajouté un séparateur entre chacun de mes articles ( wordpress blog ) mais je cherche un moyen de ne pas afficher le dernier ( sous le dernier article affiché donc ). ça fait tâche un séparateur en fin de page...

J'ai cherché du côté des pseudo éléments :last-child mais ça n'a pas l'air de fonctionner.

Voilà ce que j'ai pour le moment :

<article class="entry-post">
    <header class="entry-header"></<header>
    **contenu**
</article>
<div class="post-separator"></div>

mon css : 

.post-separator {
    width: 700px;
    height: 0;
    margin: 0 auto 16px;
    border-bottom: 1px solid rgba(0,0,0,.3);
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.5);
    -khtml-box-shadow:0 1px 0 rgba(255,255,255,.5);
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.5);
    -o-box-shadow:0 1px 0 rgba(255,255,255,.5);
    box-shadow:0 1px 0 rgba(255,255,255,.5)
}

div.post-separator:last-child {
    border: none;
    box-shadow: none;
}

J'ai essayé sans le ""div" .class", avec "article div.class", bref, j'ai tenté qq combinaisons, sans succès.

Vous avez une idée pour afficher mes divs <u>sauf</u> la dernière donc ?

Merci à tous !:)

5 réponses

Estillia
Auteur
Réponse acceptée

Bon, partant de là ( :last-of-type ), j'ai de nouveau fait plusieurs test non concluants, pour enfin trouver une solution fonctionnelle :

div.post-separator:nth-of-type(10)

( mon WP_query affiche 10 posts, donc 10 border )

Ce code fonctionnant, je me suis dit que j'allais faire la même chose en partant de la fin
div.post-separator:nth-last-of-type(1)
Mais ce dernier n'a pas fonctionné, je vais donc rester sur mon div.post-separator:nth-of-type(10).

Merci prbaron pour le chemin :)

Maenhyr

Salut, essaye avec :last-of-type du coup.

Maenhyr

Salut, essaye avec :last-of-type du coup.

Lotfi Berrahal

Bonjour, désolé j'arrive un peu après la guerre mais si tu es sur du wordpress normalement le dernier article affiché te a une class en plus last-post il me semble aussi pourquoi tu te serts pas de cette class pour donner le css désiré??
Du coup tu met ton border-bottom sur ton article et donc tu enlève la div separator et ça te donne un truc comme ça :

.entry-post {
    width: 700px;
    margin: 0 auto 16px;
    border-bottom: 1px solid rgba(0,0,0,.3);
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.5);
    -khtml-box-shadow:0 1px 0 rgba(255,255,255,.5);
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.5);
    -o-box-shadow:0 1px 0 rgba(255,255,255,.5);
    box-shadow:0 1px 0 rgba(255,255,255,.5)
}

last-post {
    border: none;
    box-shadow: none;
}
Estillia
Auteur

Je croyais devoir passer par la variable $postCount dans la loop pour définir le dernier post, non ?