Browser compatibility of selectors

CSS selectors are the core component of style sheets, and different browsers have varying levels of support for them. Understanding these differences helps in writing more robust code and avoiding rendering issues due to compatibility problems.

Basic Selector Compatibility

Type selectors, class selectors, and ID selectors are well-supported in all modern browsers:

/* Fully compatible */
div { color: red; }
.header { font-size: 16px; }
#main { width: 100%; }

Attribute selectors have more complex support:

• [attr] is supported in IE7+
• [attr=value] is supported in IE7+
• [attr^=value], [attr$=value], and [attr*=value] are supported in IE8+

/* IE8+ */
a[href^="https"]::before {
  content: "🔒";
}

Pseudo-Class Selector Compatibility

Dynamic pseudo-class browser support:

• :hover is fully supported in IE4+
• :active is supported in IE4+
• :focus has full support in IE8+

Structural pseudo-classes have significant compatibility differences:

/* IE9+ */
tr:nth-child(odd) { background: #eee; }

/* Not supported in IE */
:is(section, article) h1 {
  font-size: 2em;
}

Form-related pseudo-classes:

/* IE10+ */
input:valid { border-color: green; }
input:invalid { border-color: red; }

/* Fully compatible */
input:disabled { opacity: 0.5; }

Pseudo-Element Selector Differences

Standard pseudo-element syntax (double colon) is not supported in IE8 and below:

/* IE8 and below require single colon */
p::first-line { font-weight: bold; }

/* Compatible写法 */
p:first-line, p::first-line {
  font-weight: bold;
}

Newer pseudo-element support:

/* Not supported in IE */
::selection {
  background: yellow;
}

/* Firefox requires prefix */
::-moz-selection {
  background: yellow;
}

Combinator Selector Issues

Adjacent sibling selector (+) and general sibling selector (~) are supported in IE7+:

/* IE7+ */
h2 + p { margin-top: 0; }

/* IE7+ */
h2 ~ p { color: #666; }

Child selector (>) is supported in IE7+ but has bugs:

/* IE7 has parsing bugs */
ul > li { list-style: none; }

New Selector Feature Support

CSS3新增 selectors support:

/* IE9+ */
[class^="col-"] {
  float: left;
}

/* Edge16+ Firefox61+ */
:where(ol, ul) li {
  margin: 0.5em 0;
}

/* Chrome111+ Safari9.1+ */
:has(> img) {
  border: 1px solid #ccc;
}

Mobile Browser Special Cases

Android browser support for certain selectors:

/* Some Android 4.4- do not support */
input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

/* Mobile Safari特有 */
@supports (-webkit-touch-callout: none) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

Vendor Prefix Handling

Certain selectors require specific prefixes:

/* WebKit专属 */
::-webkit-input-placeholder {
  color: #999;
}

/* Firefox18- */
:-moz-placeholder {
  color: #999;
}

/* Firefox19+ */
::-moz-placeholder {
  color: #999;
}

/* IE10+ */
:-ms-input-placeholder {
  color: #999;
}

Selector Performance Considerations

Selector parsing performance varies across browsers:

/* Poor performance */
div:nth-of-type(n+2):not([class]) a[rel] { ... }

/* Optimized */
div.item a[rel] { ... }

Practical Project Solutions

Progressive enhancement using feature detection:

/* Modern browsers */
@supports selector(:nth-child(2 of .item)) {
  .container :nth-child(2 of .item) {
    border: 2px dashed blue;
  }
}

/* Fallback */
.container .item:nth-child(2) {
  border: 1px solid #ccc;
}

IE-specific handling:

<!--[if IE 9]>
<style>
  .ie9-fallback {
    display: block !important;
  }
</style>
<![endif]-->

Testing Tools and Methods

Cross-browser testing strategies:

// Check selector support
function isSelectorSupported(selector) {
  try {
    document.querySelector(selector);
    return true;
  } catch (e) {
    return false;
  }
}

// Example usage
if (isSelectorSupported('input[type="date"]')) {
  console.log('Date selector supported');
}