Nested Node in CSS

Question

I have something like

<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>

Is there a way to apply an adjacent sibling type rule to class a, given that they are contained within another element?

For example, I'd like to be able to do:

a + a { font-size: smaller; }

to apply a rule to all but the first div. However, this won't work with the traditional + operator, because it only applies to directly adjacent elements.

You'd have to give your wrapping `div`s a class too, and then use the adjacent sibling selector. — disinfor, Jul 14 '15 at 03:57
You're looking for the "cousin" selector, which unfortunately does not exist. — , Jul 14 '15 at 04:15
Are you allowed to wrap this nested structure within it's own div? if so it's possible to acheive what you want with the nth-child selector. — marblewraith, Jul 14 '15 at 05:17

score 1 · Accepted Answer · answered Jul 14 '15 at 05:16

General sibling combinator ~

div ~ div .a{       /* or: div ~ div > .a Or rather div.parent ~ div.parent .a */
  font-size:smaller;
}

<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>
<div>
  <div class="a">content</div>
</div>

preferabily use a parent class selector to be more specific

score 0 · Answer 2 · answered Jul 14 '15 at 04:03

The only way you can do it in pure CSS is give the parent divs a class:

<div class="wrapper">
  <div class="a">content</div>
</div>
<div class="wrapper">
  <div class="a">content</div>
</div>
<div class="wrapper">
  <div class="a">content</div>
</div>

CSS

.wrapper + .wrapper a {
styles here
}

You could also use Javascript/jQuery to target the parents of your .a divs. You might have to combine jQuery each() and parent()

Al Amin Chayan · Answer 3 · 2015-07-14T05:40:23.640

-1

a:not(:first-of-type){font-size: smaller;}

edited Jul 14 '15 at 05:40

answered Jul 14 '15 at 04:02

Al Amin Chayan

2,460
4
23
41

Did you test this? Syntactically, I guess it should be `a:not(:first-of-type)`. But it won't work anyway, because **all** the `a` tags are `first-of-type`, since `first-of-type` refers to position under parent. – Jul 14 '15 at 04:12

Nested Node in CSS

3 Answers3