How * tag can be used in CSS?
- by php html
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/