What does a star-preceded property mean in CSS?
This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).
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.
Purpose of asterisk before a CSS property
It is a browser specific CSS hack for versions 7 or below of Internet Explorer.
*property: value
Although Internet Explorer 7 corrected
its behavior when a property name is
prefixed with an underscore or a
hyphen, other non-alphanumeric
character prefixes are treated as they
were in IE6. Therefore, if you add a
non-alphanumeric character such as an
asterisk (*) immediately before a
property name, the property will be
applied in IE and not in other
browsers. Unlike with the hyphen and
underscore method, the CSS
specification makes no reservations
for the asterisk as a prefix, so use
of this hack could result in
unexpected behavior as the CSS
specifications evolve.*property: value applies the property value in IE 7 and below. It may or may
not work in future versions. Warning:
this uses invalid CSS.
From: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
What does *zoom:1 do in bootstrap?
It's like an inline conditional statement for IE5.5 - IE7. Only IE 5.5, IE6, and IE7 will display zoom: 1
because of the inline *
(known as the "star property hack"). Similar to the IE6 hack with the underscore _
.
See: http://snook.ca/archives/html_and_css/targetting_ie7
Related Topics
Why Does 'Overflow:Hidden' Prevent 'Position:Sticky' from Working
How to Dynamically Add a Class to Manual Class Names
Css Page-Break Not Working in All Browsers
How to Properly Display an Iframe in Mobile Safari
How to Select All Children of an Element Except the Last Child
Outlining and Partially Filling an Svg Shape
Maintain Aspect Ratio According to Width and Height
Prevent Flex Item from Exceeding Parent Height and Make Scroll Bar Work
Fill Background Color Left to Right CSS
Parent & Child With Position Fixed, Parent Overflow:Hidden Bug
Remove Gutter Space For a Specific Div Only
Does CSS Hover Work on Mobile Devices
Css Grid of Squares With Flexbox
How to Style a Div to Be a Responsive Square
How to Style Default Confirm Box With Only Css
Background Image, Linear Gradient Jagged Edged Result Needs to Be Smooth Edged