StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>To answer your question, you need to first understand how CSS rules are interpreted by the browser.</p> <p>Whenever you write a CSS selector, you can use one or many elements in the selector. For instance, the selector <code>div</code> has one element, both <code>div p</code> and <code>div > p</code> have two. </p> <p>Think of a CSS selector as several stages of filtering. CSS selectors are actually interpreted by the browser reading them from right to left. When multiple elements are specified in a selector, you first find the set all the elements for the right-most piece, then filter that set by the next piece, and so on.</p> <p>In the case of the <code>div</code> rule, we are saying "find me all 'div' elements on the page". Simple enough.</p> <p>In the case of the <code>div p</code> rule, we first "find all the 'p' elements on the page". But then, for each of those 'p' elements, we then ask "give me just the 'p' elements that have a 'div' as an ancestor".</p> <p>Using the same logic, let's describe <code>div * p</code>: we first "find all the 'p' elements on the page". Next, we ask "give me just the 'p' elements that have a parent element of any kind". From <em>that</em> set, we then ask 'give me just the elements out of this set that have a 'div' as an ancestor".</p> <p>The selector <code>div * p</code> would be <em>almost</em> the same as <code>div p</code>, but with one key difference: the <code><div></code> would have to be at least a grandparent of the <code><p></code> for the selector to match. See <a href="http://jsfiddle.net/cDTGY/" rel="nofollow">http://jsfiddle.net/cDTGY/</a> for an example.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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