Question

What are the CSS selectors (for e.g., +) and how do we use them? Is there a list of all the selectors? Links to relevant sources will do.

Answer 1

In the CSS specifiction (here CSS 2.1), section 5 Selectors.

Specifically, the + is called adjacent sibling selector:

5.7 Adjacent sibling selectors

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:

math + p { text-indent: 0 } 

The next example reduces the vertical space separating an H1 and an H2 that immediately follows it:

h1 + h2 { margin-top: -5mm }   

The following rule is similar to the one in the previous example, except that it adds a class selector. Thus, special formatting only occurs when H1 has class=”opener”:

h1.opener + h2 { margin-top: -5mm }   

You might also be interested in CSS 3 selectors.