How * tag can be used in CSS?

Question

I'm trying to understand how a background image is used in a css button. It seems the image is much larger than the button, still the corners are matched to the button (resulting a rounded corner button). It seems it is related to .btn *. I couldn't find any reference about how * can be used. Can you explain how the image is rendered in the button, using the * tag?

I assume * will match any element. However I don't get it how in this case the image is rendered like this.

.btn {
display: block;
position: relative;
background: #aaa;
padding: 5px;
float: left;
color: #fff;
text-decoration: none;
cursor: pointer;
}

.btn * {
font-style: normal;
background-image: url(btn2.png);
background-repeat: no-repeat;
display: block;
position: relative;
}

full example here: http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors/.

Answer 1

.btn * refers to all the tags that are children, grandchildren, grandchildren's children etc. below a tag that has the class "btn". The syntax uses a special type of CSS selector, called descendant selector.

.btn refers to specifically all tags that has the class "btn".

Answer 2

From btn.html, line 17.

.btn span {
  background-position:left bottom;
  left:-5px;
  margin-bottom:-5px;
  padding:0 0 5px 10px;
}

The above selector is responsible for the round corners. (background-position to be specific)
Try changing the value of background-position to right bottom or top left and you will see the change.

.btn * CSS definitions will apply to all childrens of class btn