views:

380

answers:

6

I am trying to understand the CSS effects that jQTouch implements. http://www.jqtouch.com/

It has some CSS definitions that contain syntax like "body > *"

body > * {
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
    min-height: 420px !important;
}
body.fullscreen > * {
    min-height: 460px !important;
}
body.fullscreen.black-translucent > * {
    min-height: 480px !important;
}
body.landscape > * {
    min-height: 320px;
}
body > .current {
    display: block !important;
}

I have searched around for some time, but can't find any hint. Could someone explain it to me?

Does it imply animation?

+1  A: 

* is a wildcard selector and simply matches all elements, so body > * will match all direct children of the body element.

Will Vousden
+4  A: 
Tor Valamo
A: 

body > * means "any element that is a direct child of the body element."

Compare this to body *, which means "any element that is a descendant of the body element." So this would also match the <a> element in <body><p><a>...</a></p></body>, for example.

Thomas
A: 

'*' refers to all elements, and '>' means immediate child elements, so body > * means all immediate child elements of the body.

It's probably a hack of some kind to refer to a particular browser, though I'm not familiar with it.

John McCollum
+2  A: 

body > * means "any direct child of the body tag", e.g. consider the following scenario

<body>
    <h1>This will be affected by body > *</h1>
    <div>
        This also
        <p>This will not be affected, because it is not a direct child</p>
    </div>
</body>
Residuum
+2  A: 

The > character is a match indicator and the * is the match being indicated.

So

body > * 

means to match any child of Body.

http://www.w3.org/TR/CSS2/selector.html

Joel Etherton