What Does "Body > *" Mean in CSS

What does body * mean in CSS?

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>

What does * HTML Body mean in a css style sheet?

The * is the universal selector, and thus matches any element. e.g.

P * { }

Matches any element which is the child of a P tag

* HTML

should mean nothing because HTML cannot be the child of anything (by definition). It's used because IE (edit, at least IE 5 - 6 - thanks RoBorg!) ignores * and so it can be used to define IE specific styles:

HTML {
 // Normal styles
}

* HTML {
 // IE Specific styles
 }

See http://www.peachpit.com/articles/article.aspx?p=358552

What does the (greater-than sign) CSS selector mean?

> is the child combinator, sometimes mistakenly called the direct descendant combinator.¹

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

difference between body and * in css

The body selector has higher priority, but the * selector applies more broadly, so in <body>foo<p>bar</p></body> the body selector will determine the background of the text foo, but the * selector will determine the background of the <p> element.

Note, also that many browsers create an element around the <body> that includes its margins and scrollbars, so the * selector may also determine the color of that region.

What does the + (plus sign) CSS selector mean?

See adjacent selectors on W3.org.

In this case, the selector means that the style applies only to paragraphs directly following another paragraph.

A plain p selector would apply the style to every paragraph in the page.

This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.

See also Microsoft's overview for CSS compatibility in Internet Explorer.

What does an asterisk (*) do in a CSS selector?

It is a wildcard, this means it will select all elements within that portion of the DOM.

For example, if I want apply margin to every element on my entire page you can use:

* {
    margin: 10px;
}

You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:

p * {
    margin: 10px;
}

Your example is doing some css trickery to apply consecutive borders and margins to elements to give them multiple coloured borders. For example, a white border surrounded by a black border.

Why defining body attributes in css?

I found a good reason to define the html and body width and height to 100%. Say you want to vertically align a relative positioned div, you need to put it into an absolute positioned container:

html,body {  margin: 0;  padding: 0;}#container {  position: absolute;  width: 100%;  height: 100%;}#main {  background: lightgrey;  position: relative;  top: 50%;  transform: translateY(-50%);  width: 100px;  height: 100px;  text-align: center;  margin-left: auto;  margin-right: auto;}

<div id="container">  <div id="main">    <h1>MY DIV</h1>  </div></div>

What Does "Body > *" Mean in CSS