Discussion :

[dominos]

Bonjour,

Dans une page, j'ai deux boutons de navigation : Précédent et Suivant
Ils s'inspirent de ce modèle responsive : https://www.w3schools.com/booTsTrap/...prev&stacked=h

Mais comme je n'aime pas l'arrondi proposé, du coups dans maclass de la balise a, j'ai ajouté border-radius : 0px: mais ça ne fonctionne pas,
ce qui est étrange c'est que si j'ajoute directement celui-ci dans une balise par style, ça fonctionne...

Code :

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

1
2
3
.maclass {
  border-radius:0px; // fonctionne pas
}

Code :

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

<a Href="lien.." class="maclass" style="border-radius: 0;"> // fonctionne

S'il vous plait, auriez-vous une idée du problème ?

D'avance, merci pour votre réponse.

[Invité]

Bonjour,

le "poids" de ton sélecteur n'est pas assez fort pour surpasser la règle.

Bootstrap CSS dit :

Code css :

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

1
2
3
4
.pager li > a, .pager li > span {
  border-radius:15px;
.....
}

Il faut le "surpasser" avec :

Code css :

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

1
2
3
.pager li > a, .pager li > span {
  border-radius:0 !important; /* !important : règle imposée */
}

ou :

Code :

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

1
2
3
.container .pager li > a, .container .pager li > span { /* sélecteur de poids supérieur */
  border-radius:0;
}

A LIRE :

• Règles d'application des styles CSS et gestion des conflits
• Tout ce que vous devez savoir sur la déclaration !important

[dominos]

Parfait ! C'est exactement ce que je cherchais à faire.

Code :

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

1
2
3
4
5
6
.pager li > a.btn-left {
	border-radius: 15px 0px 0px 15px !important; 
}
.pager li > a.btn-right {
	border-radius: 0px 15px 15px 0px !important; 
}

Merci pour l'explication.