Is there a CSS selector for all grandchildren except first?

Question

In this JSFiddle, how can I style all <a> elements except the first grandchild? (abc) with a single selector? I want to avoid using two rules at all costs.

#outer a:not(:first-child){
  color: red;
}

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

Temani Afif · Accepted Answer · 2018-02-13T10:16:19.570

1

You can do this (not sure if you can avoid more than 1 selector)

#outer >div:first-child a:not(:first-child),
#outer >div:not(:first-child) a{
  color: red;
  border:1px solid;
}

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

edited Feb 13 '18 at 10:16

answered Feb 13 '18 at 10:04

Temani Afif

245,468
26
309
415

If inheritance is an option then barro32's answer will suffice. If the requirement is to target only the a elements and not the div elements, then doing this with one selector requires level 4 :not() in the form of `#outer > div > a:not(:first-child > :first-child)`. [Fiddle](https://jsfiddle.net/BoltClock/erxfbuj1) (requires Safari) – BoltClock Feb 13 '18 at 16:39
(In case that looks confusing to you: `#outer > div > a:not(div:first-child > a:first-child)`) – BoltClock Feb 13 '18 at 16:41
@BoltClock yes for sure the level 4 will bring more flexibility ... waiting to answer the first questions about them ;) – Temani Afif Feb 13 '18 at 18:52
2

I [answered](https://stackoverflow.com/a/14437502) a [few](https://stackoverflow.com/a/27983098) of [them](https://stackoverflow.com/a/28050505) [before](https://stackoverflow.com/a/28724566) [you](https://stackoverflow.com/a/32580945) [joined](https://stackoverflow.com/a/35993791) [the](https://stackoverflow.com/a/36421262) [site](https://stackoverflow.com/a/41455901), so I'll leave some of the rest to you. 6+ years after the FPWD, there are still barely any implementations so you're not that late to the party. Anyway, I did just get an idea for a Q&A for :not() that I think you'd appreciate. – BoltClock Feb 14 '18 at 04:19
@BoltClock I'm writing scss files - I was unable to paste either of the 2 formats and unable to replicate it with scss nesting :( My editor complains about syntax error. – user2651804 Feb 14 '18 at 08:27
1

@user2651804: Sorry, I wasn't clear - those selectors are from a future standard and don't work today. – BoltClock Feb 14 '18 at 08:28
@BoltClock yes intresting posts, i never though i will find questions related to drafts and non-implemented features ... well am here since only 4 months so still discovering :) by the way any help with [this question](https://stackoverflow.com/questions/48777787/margin-collapsing-with-floated-element) ? .. i saw you had many posts about complex margin-collapsing situation, so maybe you have some clue :) – Temani Afif Feb 14 '18 at 14:48

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

One rule 2 selectors:

a ~ a The general sibling combinator covers any <a> that follows another <a>. This basically selects all but the first <a> of sibling <a>.

div:nth-of-type(n+2) a This targets all <a> inside the second div and any preceding sibling divs in the future.

Demo

a~a,
div:nth-of-type(n+2) a {
  color: red
}

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

Props to Temani Afif for suggesting (n+2).

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 13 '18 at 10:23

zer00ne

41,936
6
41
68

1

i would generalise the second selector to `2+n` for example so it covers all potential divs ;) – Temani Afif Feb 13 '18 at 10:24

score 0 · Answer 3 · answered Feb 13 '18 at 10:09

0

This works, not exactly sure why!

#outer :not(:first-child) {
  color: red;
}

<div id="outer">
  <div id="firstParent">
    <a>abc</a>
    <a>def</a>
    <a>hij</a>
  </div>
  <div id="secondParent">
    <a>klm</a>
    <a>opq</a>
  </div>
</div>

answered Feb 13 '18 at 10:09

barro32

2,559
23
36

well you select everything but not the first child at any level :) ... so you add red to `seconParent` and thus it will apply to all his childs even if later you won't select his first a ;) ... so you apply red to all `a` except of `abc` and `klm` and you apply red to secondParent – Temani Afif Feb 13 '18 at 10:10
That makes sense. – barro32 Feb 13 '18 at 10:12
but pay attention as this may not always behave as excepted ... add `border` to your style and see what happen :) with border it won't work like with color – Temani Afif Feb 13 '18 at 10:13

Is there a CSS selector for all grandchildren except first?

3 Answers3

Demo