Generally, CSS selectors refer to markup or, in some cases, to element properties as set with scripting (client-side JavaScript), rather than user actions. For example, :empty matches element with empty content in markup; all input elements are unavoidably empty in this sense. The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value. And :checked and :indeterminate are similar things. They are not affected by actual user input.

The selector [value=""] tests whether the element has the value attribute in markup and has the empty string as its value.

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

In the case above, :checked is a reasonable thing to search for, but [checked] is not.

CSS syntax is awesome for two reasons: It is an order of magnitude faster and less resource intensive than the more complex XPath. When what you want to find can be found with a css selector, a corresponding XPath query doing the same would most of the time be much longer and harder to read.

Interestingly, it uses multiple methods to locate the annotation within the cited page: absolute character count, text to search for, and XPath notation.