Existe-t-il un moyen de spécifier un raccourci CSS pour "tous les éléments sauf le premier / dernier"?

Question

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 d' p {...} puis p:first-child {...}?
• plus simple et intuitive que l' p:nth-child(-n+1)?

Si il n'y est pas, savez-vous de toute tentative visant à ajouter?

Answer 1

Pour tous p éléments sauf le premier enfant, utiliser l'une de ces (le deuxième est mieux pris en charge):

p:not(:first-child)
p:first-child ~ p

Pour tous p éléments, à l'exception du dernier enfant:

p:not(:last-child)

Pour tous p éléments, à l'exception de la première et de la dernière des enfants:

p:not(:first-child):not(:last-child)

Comme d'habitude, CSS3 l' :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 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.

Answer 2

Si IE7-8 n'est pas nécessaire, vous pouvez utiliser l' :not() 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, c'est que l' :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.

Imaginez ce code html:

<ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

Et ce que peu de CSS:

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; }

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:

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; margin-left: 10px; }
ul > li:first-child { margin-left: 0; }

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.

Answer 3

Eh bien, vous pourriez faire:

 p:not(:first-child) {...}
 

Mais seuls les navigateurs les plus récents prennent en charge la classe de puces :not .

A part ça, non. Votre meilleure option est de spécifier un style pour tous, puis de le remplacer pour le premier / dernier.

Answer 4

Je suggère d'utiliser le premier du type:

p: non (: premier du type) {...}

http://caniuse.com/#search=first-of-type