CODEWITHSUNDEEP
css-selectorscss
Lea Hayes
Lea Hayes

Reputation: 64236

CSS Adjacent Selector / Meaning

What is meant by the following selector?

.a .b + .c .d { ... }

Intended meaning (and way in which it appears to function): Select d inside c that is adjacent to b inside a

/* Brackets to hide ambiguity */
(.a .b + .c) .d

Is this correct use of the adjacenct sibling selector? What is the operator + precedence in CSS grammar?

Upvotes: 2

Views: 1145

Answers (1)

BoltClock
BoltClock

Reputation: 724542

Select .d inside .c that is adjacent to .b inside .a

Yes, that's right. The way you placed your brackets also makes sense to me. Nest them some more to be clearer:

(((.a) .b) + .c) .d

In this example, only the second p.d element is matched:

<div class="a">
  <div class="b">
    <p class="d"></p> <!-- [1] -->
  </div>
  <div class="c">
    <p class="d"></p> <!-- [2] -->
  </div> 
  <div class="c">
    <p class="d"></p> <!-- [3] -->
  </div>
</div>

  1. Not selected
    This p.d element isn't contained in an element with the class c.

  2. Selected
    This p.d element is contained in a .c element. The .c element immediately follows a .b element, and both of these share the .a ancestor element.

  3. Not selected
    This p.d element is contained in a .c element. However, this doesn't immediately follow a .b element; instead it comes after another .c element, so its p.d doesn't satisfy the selector.

    If the general sibling combinator ~ were used instead of the adjacent sibling combinator +, as in

    .a .b ~ .c .d

    Then this p.d would be matched.

What is the operator + precedence in CSS grammar?

All compound selectors and combinators in a sequence are processed from right to left, using each selector group as a step. This answer elaborates. (This may be counter-intuitive when you think in brackets; to make sense of it simply treat the brackets as if the outermost ones came first. Either ordering is fine, though, as long as you remember that combinators aren't associative. See the linked answer for details.)

Upvotes: 5

Related Questions