Est-il possible de spécifier un CSS un raccourci pour “tous les éléments sauf le premier/dernier”?
Très souvent, il est naturel de besoin de spécifier une feuille de style CSS pour tous les éléments sauf le premier (ou le dernier). Par exemple, lorsque le style des paragraphes, vous souhaitez ajouter une marge inférieure à tous les éléments sauf le dernier (ou de la même façon, une marge supérieure à tous les éléments sauf le premier).
Est-il un moyen de le faire c'est :
- plus concis que la définition de
p {...}
et puisp:first-child {...}
? - plus simple et intuitive que
p:nth-child(-n+1)
?
Si il n'y est pas, savez-vous de toute tentative visant à ajouter?
- Je pense que le plus commun de la solution est d'appliquer des styles à tout, puis de supprimer les indésirables en sélectionnant le premier et le dernier à le faire.
- Utiliser le
:not
sélecteur: jsfiddle.net/FGfmj
Vous devez vous connecter pour publier un commentaire.
Pour tous
p
éléments sauf le premier enfant, utiliser l'une de ces (le deuxième est mieux pris en charge):Pour tous
p
éléments, à l'exception du dernier enfant:Pour tous
p
éléments, à l'exception de la première et de la dernière des enfants:Comme d'habitude, CSS3 du
:not()
et:last-child
ne sont pas pris en charge jusqu'à IE9+ et relativement nouvelles versions des autres navigateurs. Vous n'allez pas atteindre de très loin en termes de prise en charge du navigateur (IE8 et plus), sauf si vous ajoutez des classes de votre prénom et de votre enfants, à l'aide de JavaScript ou autre.Rappelez-vous que verticale de l'effondrement des marges entre l'écoulement et les paragraphes de leur ancêtre(s), de sorte que si vous voulez remettre à zéro les marges de l'élément de conteneur pour ces alinéas ainsi, vous ne devriez pas avoir besoin de remettre à zéro les marges de la première et de la dernière
p
éléments en particulier. Voici un violon pour illustrer.p
éléments sauf le premier enfant" peut être raccourcie avecp + p
:*-of-type
pour:*-child
pour la même raison.).footer__link a:not(:first-child) { ... }
fonctionne très bien.Eh bien, vous pourriez faire:
Mais seulement les plus récentes des navigateurs prennent en charge la
:not
pseudo-classe.Autre que cela, non. Votre meilleure option est de spécifier un style pour tous et de la remplacer pour la première/dernière.
Si IE7-8 n'est pas nécessaire, vous pouvez utiliser le
:non()
sélecteur CSS.Mais si vous avez besoin de soutien IE7+, qui peut encore être le cas il y a un petit truc que vous pouvez utiliser et obtient habituellement vous assez loin. Moins connue que la
:first-child
pseudo-sélecteur fonctionne réellement dans IE7+ (pas:last-child
si), comme le sont certains autres sélecteurs css et de ce fait, des choses comme l'ajout de parois verticales à l'horizontale avec une flottait mise en page possible.Imaginer ce html:
Et ce que peu de CSS:
Alors maintenant, tous les éléments de la liste sont les uns à coté des autres, et maintenant, nous voulons ajouter une marge ENTRE tous les éléments, mais pas sur le côté droit ou gauche, nous pouvons le faire en css:
Généralement, cela se couvre plus de 95% des cas où je veux quelque chose d'unique, puis le reste de la "oubliées" sélecteurs de couvrir quelques pour cent, après cela, vous devez ajouter un peu de classes qui n'est pas beaucoup d'un goulot d'étranglement de toute façon dans le backend de la page.
Je suggère d'utiliser
first-of-type
:Prise en charge du navigateur (caniuse)