CSS Highlight Inheritance has Shipped!

• 22 October 2024
• Highlight Pseudos
• Chromium
• Web Standards

The CSS highlight inheritance model describes the process for inheriting the CSS properties of the various highlight pseudo elements:

• ::selection controlling the appearance of selected content
• ::spelling-error controlling the appearance of misspelled word markers
• ::grammar-error controlling how grammar errors are marked
• ::target-text controlling the appearance of the string matching a target-text URL
• ::highlight defining the appearance of a named highlight, accessed via the CSS highlight API

The feature has now launched in Chrome 131, and this post describes how to achieve the old selection styling behavior if selection is now not visible, or newly visible, on your site.

The most common problem comes when a site relies on ::selection properties only applying to the matched elements and not child elements. For example, sites don’t want <div> elements themselves to be visible, but do want the text content inside them to show the selected text. Some sites may have used such styling to work around old bugs in browsers whereby the highlight on the selected <div> would be too large.

Previously, this style block would have the intended result:

<style>
  div::selection {
  	background-color: transparent;
  }
</style>

With CSS highlight inheritance the children of the <div> will now also have transparent selection, which is probably not what was intended.

There’s a good chance that the selection styling added to work around bugs is no longer needed. So the first thing to try is removing the style rule entirely.

Should you really want to style selection on an element but not its children, simplest is to add a style rule to apply the default selection behavior to everything that is not a <div> (or whatever element you are selecting):

<style>
  div::selection {
    background-color: transparent;
  }
  :not(div)::selection {
    background-color: Highlight;
  }
</style>

Highlight is the system default selection background color, whatever that might be in the browser and operating system you are using.

More efficient is to use the child combinator because it will only create new pseudo style objects for the <div> and its direct children, inheriting the rest:

<style>
  div::selection {
    background-color: transparent;
  }
  div > *::selection {
    background-color: Highlight;
  }
</style>

Overall, the former may be better if you have multiple ::selection styles or your ::selection styles already use complex rules, because it avoids the need to have a matching child selector for every one of those.

There are other situations, but building on the examples we suggest two generalizations:

• Make use of the CSS system colors Highlight and HighlightText to revert selection back to the platform default.
• Augment any existing ::selection style rules with complementary rules to cancel the selection style changes on other elements that should not inherit the change.

Chrome issue 374528707 may be used to report breakage due to enabling CSS highlight inheritance and to see fixes for the reported cases.

• Previous: Canvas Text Editing
• Next: Caret Customization on the Web