Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Every sequence of simple selectors and combinators is read by browsers from right to left, in a linear fashion. Combinators do not affect the ordering in any way. The rightmost selector, after the last combinator if any, is known as the <em>key selector</em> (see the reference links below for more), and that identifies the element that the rule applies to (also known as the <em>subject</em> of the selector, although note that the key selector may not always represent the subject of the selector, since different applications implement selectors differently).</p> <p>The selector <code>#id1 #id2 + #id3</code> means</p> <blockquote> <p>Select element <code>#id3</code><br> if it directly follows as a sibling of <code>#id2</code><br> that is a descendant of <code>#id1</code>.</p> </blockquote> <p>A DOM structure in which <code>#id3</code> would match the selector would look like this:</p> <pre><code>#id1 ... any level of nesting #id2 #id3 </code></pre> <p>While <code>#id1 + #id2 #id3</code> means</p> <blockquote> <p>Select element <code>#id3</code><br> if it is a descendant of <code>#id2</code><br> that directly follows as a sibling of <code>#id1</code>.</p> </blockquote> <p>And a DOM structure in which <code>#id3</code> would match the selector would look like this:</p> <pre><code>#id1 #id2 ... any level of nesting #id3 </code></pre> <p>Notice the difference in the position of element <code>#id2</code> in this DOM structure, as compared to the one above.</p> <p>There isn't much of a precedence issue here since the descendant and sibling combinators go in different directions in the DOM. Both selector sequences read right to left either way.</p> <p>Related answers:</p> <ul> <li><a href="https://stackoverflow.com/questions/3851635/css-combinator-precedence/3851754#3851754">CSS combinator precedence?</a></li> <li><a href="https://stackoverflow.com/questions/5478920/css-selector-are-parentheses-allowed/5478943#5478943">Are parentheses allowed in CSS selectors?</a></li> <li><a href="https://stackoverflow.com/questions/6886900/css-adjacent-selector-meaning/6887175#6887175">CSS Adjacent Selector / Meaning</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload