Single or Double Colon for CSS Pseudo-elements: Which Notation Should I Use?

Single vs. Double Colon Notation for Pseudo-elements: A Practical Approach

When targeting pseudo-elements in CSS, the choice between single (:after) and double (::after) colon notation has been debated due to browser compatibility. While modern browsers support both notations, older versions of Internet Explorer (IE7 and IE8) don't support the double colon notation.

Single Colon Notation vs. Both Notations

Using both notations to support all browsers seems tempting, but this approach is not recommended. According to CSS 2.1 specifications, when a user agent encounters an invalid selector (e.g., a combination of single and double colon notations), it should ignore the entire rule.

Example of Invalid Selector:

.foo:after,
.foo::after { /*styles*/ }

Choosing the Best Notation

Given the potential compatibility issues, using solely the single colon notation is a more reliable option for current web development. While IE8 still has a negligible market share, it's important to consider its user base and avoid potentially breaking styles for a small but still significant group of users.

Double Colon Notation in the Future

Once IE8's market share becomes negligible, you could revisit the issue of using the double colon notation to take advantage of its more specific targeting capabilities. However, for the time being, the single colon notation remains the most practical choice.

The above is the detailed content of Single or Double Colon for CSS Pseudo-elements: Which Notation Should I Use?. For more information, please follow other related articles on the PHP Chinese website!