28172 sujets

CSS et mise en forme, CSS3

[Résolu] Li:first-child + li et media queries

bonjour à tous.

J'ai mis en place le css suivant

.sf-menu li {
	margin: 1%;
}
.sf-menu li:first-child + li + li, .sf-menu li:first-child + li + li + li {
	margin: 10px 1%;
}
@media screen and (min-width: 768px) {
	.sf-menu li {
		margin:0 4.5% 0 0px;	
	}

}


Mon soucis étant que la media queries ne cible que les éléments que ne font pas partie de:
.sf-menu li:first-child + li + li, .sf-menu li:first-child + li + li + li {}

Hors je souhaiterais que tous sois ciblés

finalement le code suivant, sans : @media screen and (max-width: 768px) {}... en démarche mobile first

.sf-menu li {
	margin: 1%;
}
@media screen and (max-width: 768px) {
	.sf-menu li:first-child + li + li, .sf-menu li:first-child + li + li + li {
		margin: 10px 1%;
	}
}
@media screen and (min-width: 768px) {
	.sf-menu li {
		margin:0 4.5% 0 0px;	
	}

}
Hello,

Il s'agit d'un problème de poids de sélecteur : tes sélecteurs (.sf-menu li:first-child + li + li et .sf-menu li:first-child + li + li + li) ont plus de poids que .sf-menu li. Du coup, ton code dans les media queries sera toujours surchargé par ce que tu as défini plus haut.

Si tu veux comprendre les poids CSS, voici un lien bien pratique Smiley cligne http://blog.organicweb.fr/comprendre-le-poids-des-regles-css

Il faudrait que tu rajoutes tes sélecteurs dans les mediaqueries pour qu'ils soient pris en compte.

Sinon, je trouve qu'ils sont complexe, pourquoi ne pas utiliser :nth-child ? : http://css-tricks.com/useful-nth-child-recipies/http://css-tricks.com/useful-nth-child-recipies/

Ce qui de donnerai ceci :

.sf-menu li {
	margin: 1%;
}
.sf-menu li:nth-child(3), .sf-menu li:nth-child(4) {
	margin: 10px 1%;
}
@media screen and (min-width: 768px) {
	.sf-menu li, .sf-menu li:nth-child(3), .sf-menu li:nth-child(4) {
		margin:0 4.5% 0 0;	
	}

}


Bonne journée Smiley smile
Sujet clos
Aller à