What Does an Asterisk (*) Mean in a CSS Property Name?

Understanding the Role of an Asterisk in CSS Property Names

In CSS selectors, an asterisk (*) is used to match any element, but what does it represent when encountered within a property name?

Usage in a CSS Property Name

An asterisk (*) is not a valid character in CSS property names and causes a syntax error. This means that when an asterisk is present, the property name becomes invalid and the declaration is ignored by the browser.

Example:

.yui-button .first-child
{
    display:block;
    *display:inline-block;
}

In this example, the *display:inline-block declaration is invalid due to the presence of the asterisk. The browser will simply ignore this declaration and apply the valid display:block declaration.

Browser Bugs and Implications

Despite being a syntax error, browsers have historically exhibited bugs that allowed them to ignore the asterisk. This led to a practice of using the asterisk to target specific browsers, such as IE7.

However, relying on this behavior is discouraged as it creates browser-specific styling that degrades the user experience for users of updated browsers.

Alternative Solutions

To conditionally apply styles to specific browsers, it is recommended to use conditional comments instead of the asterisk. Conditional comments are comments that are supported by older browsers but ignored by newer ones, allowing for targeted styling.

Conclusion

While an asterisk can be used in CSS selectors to match any element, it is not a valid character in CSS property names and should be avoided. Browsers have generally fixed bugs that allowed them to ignore the asterisk, making it an unreliable technique for browser-specific styling.

The above is the detailed content of What Does an Asterisk (*) Mean in a CSS Property Name?. For more information, please follow other related articles on the PHP Chinese website!