0

I couldnt understand the below from W3C spec.

div * p

matches a P element that is a grandchild or later descendant of a DIV element. Note the white space on either side of the "*" is not part of the universal selector; the white space is a combinator indicating that the DIV must be the ancestor of some element, and that that element must be an ancestor of the P.

How the white space is a combinator indicating that the DIV must be the ancestor of some element?

Please help to clarify

Community
  • 1
  • 1
devv
  • 311
  • 5
  • 17
  • *sidenote:* Avoid using `*` in CSS: http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful/1714151#1714151 – Raptor Oct 22 '13 at 03:55
  • There is nothing called `whitespace` in CSS. You write `div*p` and `div * p` selects the same thing. Correct me if I am wrong. – Praveen Kumar Purushothaman Oct 22 '13 at 04:07
  • 1
    div*p and div * p both won't work http://jsfiddle.net/qEfz2/ – Bhojendra Rauniyar Oct 22 '13 at 04:13
  • A selector is a chain of one or more simple selectors separated by combinators. Combinators are: white space, ">", and "+". White space may appear between a combinator and the simple selectors around it. – devv Oct 22 '13 at 04:19
  • @C-Link you are half wrong.. http://jsfiddle.net/qEfz2/2/ – Mr_Green Oct 22 '13 at 05:05
  • @Mr_Green Oh! yeah, you are right. Thanks for informing that.... – Bhojendra Rauniyar Oct 22 '13 at 05:29
  • 1
    @Praveen Kumar: `div*p` is invalid and won't select anything. `div * p` selects `p` that is at least two levels down from a `div`. The term whitespace is confusing here, because whitespace is often thought of to be insignificant, but in this case it is very significant. – BoltClock Oct 22 '13 at 06:51
  • 1
    @Praveen Kumar: Even if your statement that `div*p` and `div * p` worked the same was true, then you just pretty much defined exactly what whitespace is: space characters that don't mean anything. – BoltClock Oct 22 '13 at 06:56

1 Answers1

3

To answer your question, you need to first understand how CSS rules are interpreted by the browser.

Whenever you write a CSS selector, you can use one or many elements in the selector. For instance, the selector div has one element, both div p and div > p have two.

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.

In the case of the div rule, we are saying "find me all 'div' elements on the page". Simple enough.

In the case of the div p 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".

Using the same logic, let's describe div * p: 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 that set, we then ask 'give me just the elements out of this set that have a 'div' as an ancestor".

The selector div * p would be almost the same as div p, but with one key difference: the <div> would have to be at least a grandparent of the <p> for the selector to match. See http://jsfiddle.net/cDTGY/ for an example.

Chris
  • 9,994
  • 3
  • 29
  • 31
  • Thanks for elaborate explanation. div p ==> descendant selector. Then why there universal selector in between and white space around it? – devv Oct 22 '13 at 04:25
  • I updated the answer to demonstrate the difference :) – Chris Oct 22 '13 at 04:32
  • Yes. Whitespace causes p to be descendant of universal operator * -:) – devv Oct 22 '13 at 06:13