28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ordre des régles pour la mise en forme des liens

Salut

Je me pose une question. Pour styliser un lien il faut que l'ordre des règles soit : link, visited, focus, hover et active.

J'ai ce code :


.liens {
	color:$couleur-liens;
	text-decoration:underline $couleur-liens;
	
	transition-duration: 1s;
	transition-property: background-color,color;

		&:visited, &:focus, &:hover, &:active {
			@extend %vert-a;
			transition-duration: 1s;
			transition-property: background-color,color;
		}
}


L'ordre des règles est respecté. Moi je voudrais styliser le focus. Donc, avec une règle a part genre :


.liens {
	color:$couleur-liens;
	text-decoration:underline $couleur-liens;
	
	transition-duration: 1s;
	transition-property: background-color,color;

		&:visited, &:hover, &:active {
			@extend %vert-a;
			transition-duration: 1s;
			transition-property: background-color,color;
		}
		
		&:focus {
			border:#000 1px solid;
			transition-duration: 1s;
			transition-property: background-color,color;
		}
}


Du coup l'ordre ne sera plus le même. Comment je pourrais faire ?
Modérateur
Salut,

il y a quoi dans vert-a ?

Quelques remarques pour commencer :

Dans ton :focus il n'y a que le border en plus donc on peut écrire :
.liens {
		&:visited, &:hover, &:focus, &:active {
			@extend %vert-a;
			transition-duration: 1s;
			transition-property: background-color,color;
		}
		
		&:focus {
			border: #000 1px solid;
		}
}


Ensuite, l'ordre link, visited, focus, hover et active est important quand un style en overide un autre : par exemple la couleur du lien change en fonction des états. Si l'ordre n'est pas respecté les mauvaises couleurs seront appliquées.

Or ici :
1 - ils ont tous le même style donc l'ordre importe peu au final.
2 - si c'est une propriété rajoutée comme le border ici ca n'aura aucun impact puisque personne ne va l'overider. Même si on met le focus en premier par exemple et bah le border sera toujours là au focus (jusqu'à ce que tu mettes un border-none dans les autres sélecteur)

Bonne journée
Meilleure solution
Le %vert-a correspond à :

%violet-a {
	background-color:$violet-a;
	color:#fff;
}


Merci pour ces remarques. Donc je n'ai pas à batailler avec l'ordre.
Sujet clos
Aller à