Is there any way to specify a CSS shorthand for “all elements except the first/last”?

Very often, it’s natural to need to specify a CSS style for all elements except the first (or the last). For example, when styling paragraphs, you wish to add a bottom margin to every element except the last one (or similarly, a top margin to every element except the first one).

Is there any way to do that that’s :

  • more concise than defining p {...}
    and then p:first-child {...}
    ?
  • more straightforward and intuitive than p:nth-child(-n+1)
    ?

If there is not, do you know of any attempt at adding it?

Problem courtesy of: julien_c

Solution

For all p
elements except the first child, use either one of these (the second one is better-supported):

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

For all p
elements except the last child:

p:not(:last-child)

For all p
elements except the first and the last children:

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

As usual, CSS3
‘s :not()
and :last-child
aren’t supported until IE9+ and relatively new versions of other browsers. You’re not going to reach very far in terms of browser support (IE8 and older) unless you add classes to your first and last children, using JavaScript or otherwise.

Remember that vertical margins collapse between in-flow paragraphs and their ancestor(s)
, so unless you want to zero out the margins of the container element for these paragraphs as well, you shouldn’t need to zero out the margins of the first and last p
elements specifically. Here’s a fiddle
to illustrate.

Solution courtesy of: BoltClock

Discussion

I would suggest to use first-of-type:

p:not(:first-of-type) {…}

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

Discussion courtesy of: David Morales

If IE7-8 support is not needed you can use the
:not()
CSS selector

.

But if you need to support IE7+, which may still be the case there is a little trick you can use and usually gets you fairly far. A lesser known fact is that the :first-child
psuedo selector actually works in IE7+ (not :last-child
though) as are some other css selectors
and this makes stuff like adding vertical margins in a horizontally floated layout possible.

Imagine this html:

  • Item #1
  • Item #2
  • Item #3
  • Item #4

And this as some CSS:

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

So now all list items are horizontally next to each other, and now we want to add a margin in BETWEEN all items but not on the right or left side, we can do this in 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; }

This usually covers 95% of the cases where I want something unique, then the rest of the ‘forgotten’ selectors cover another few percent
, after that you need to add some classes which usually isn’t much of a bottleneck anyway in the backend of the page.

Discussion courtesy of: sg3s

Well, you could do:

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

But only the most recent browsers support the :not
psuedo-class.

Other than that, no. Your best option is to specify a style for all and then override it for the first/last.

Discussion courtesy of: Niet the Dark Absol

This recipe can be found in it’s original form on Stack Over Flow
.

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Is there any way to specify a CSS shorthand for “all elements except the first/last”?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录