28172 sujets

CSS et mise en forme, CSS3

[Résolu] Fonction border-bottom

Bonjour,

Je viens vers vous car j'aimerais savoir s'il est possible avec les css d'obtenir le border-bottom uniquement si il y a au moins deux formulaires et ne pas l'avoir sur le dernier.

Exemple 1 :

<div class="cart-item">
border : none
</div>

Exemple 2 :

<div class="cart-item">
border-bottom: 1px solid #ddd;
</div>
<div class="cart-item">
border-bottom: 1px solid #ddd;
</div>
<div class="cart-item">
border : none
</div>

Merci d'avance

Bien cordialement
Modifié par sebsimappus (15 Jan 2017 - 11:26)
Bonjour
Pour avoir des border-bottom sur tout sauf le dernier, j'utilise le selecteur :last-of-type
du genre

div.cart-item{border-bottom:1px solid #ddd;}
div.cart-item:last-of-type{border-bottom:none;}

Ce qui se comprend comme: mettez une bordure grise en bas de toutes les div de classe cartitime, sauf sur la dernière.
Modifié par PapyJP (15 Jan 2017 - 12:55)
Bonjour.

On peut aussi faire un border-top sur tous sauf le premier... qui doit être ce que je fais habituellement d'ailleurs. Smiley sweatdrop 

div.cart-item + div.cart-item {border-top:1px solid #ddd;}


Smiley smile
Administrateur
Bonjour,

le div devant chaque sélecteur n'est pas nécessaire dans tous les exemples ci-dessus ; .cart-item suffit et cela a le gros avantage de sélectionner également form.cart-item ou section.cart-item ou article.cart-item, etc

Pour sélectionner tous sauf le 1er, .cart-item:not(:first-child) est une autre possibilité.
Pour sélectionner le dernier, .cart-item:last-child a le même effet que .cart-item:last-of-type quand il ne s'agit que de div mais plus s'il y a d'autres types d'éléments. À voir selon les cas Smiley smile
sebsimappus a écrit :
Bonjour,

Je viens vers vous car j'aimerais savoir s'il est possible avec les css d'obtenir le border-bottom uniquement si il y a au moins deux formulaires et ne pas l'avoir sur le dernier.

Exemple 1 :

&lt;div class="cart-item"&gt;
border : none
&lt;/div&gt;

Exemple 2 :

&lt;div class="cart-item"&gt;
border-bottom: 1px solid #ddd;
&lt;/div&gt;
&lt;div class="cart-item"&gt;
border-bottom: 1px solid #ddd;
&lt;/div&gt;
&lt;div class="cart-item"&gt;
border : none
&lt;/div&gt;

Merci d'avance

Bien cordialement

En complément des réponses précédentes, une petite suggestion... Pourquoi ne pas utiliser une balise HR pour séparer chaque formulaire ?
Elle a l'avantage d'être facilement stylable via CSS et s'insère facilement dans le source HTML, étant reconnue depuis longtemps par les navigateurs.
C'est le procédé que j'utilise dans mes développements pour la séparation entre formulaires consécutifs.
Simple et ne reposant pas sur la reconnaissance par le navigateur des attributs de sélection spécifiques CSS.
Du moins si j'ai bien compris le besoin exprimé par le sujet...
Bonjour,

Vous avez bien compris ma demande, avant la réécriture du code j'avais utiliser la fonction hr c'est vrai quel est facile à inséré et ajustable avec les css.

Pourtant je trouve que c'est plus propre maintenant.

Merci à vous

Cordialement
Sujet clos
Aller à