::grammar-error and ::spelling-error - Pseudo-elements CSS.

Description of pseudo-elements ::grammar-error and ::spelling-error.

These two pseudo-elements target words or parts of texts that contain mistakes:

• ::spelling-error identifies spelling mistakes,
• ::grammar-error Identifies grammar mistakes.

But at the moment (2025) Firefox   still doesn't recognize the pseudo-element ::grammar-error.

Spell or grammar checking can be disabled with the HTML spellcheck="false" attribute, also inoperative are the pseudo-elements ::grammar-error and ::spelling-error.

A limited number of properties can apply to these selectors:

• Foreground and background colors: color, background-color.
• The cursor properties: cursor and caret-color.
• The frame: outline and detailed properties.
• Text decoration: text-decoration and detailed properties.
• The emphasis color: text-outline-color.
• Text shading: text-shadow.

Example.

Spelling and grammar checks are performed when the input box is active: click on the text below. You are free to add or correct mistakes to observe the behavior of your browser.
You may be required to install the grammar checker.

Browers compatibility.

Support for the ::grammar-error and ::spelling-error pseudo-classes is still imperfect, especially on the Firefox   browser, which is widely used.

1

::grammar-error
pseudo-class

2

::spelling-error
pseudo-class

Estimated overall support.

86%

86%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari sur IOS

Safari

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

::grammar-error and ::spelling-error pseudo-elements history.

• CSS Pseudo-Elements Module Level 4

  Introducing the ::grammar-error and ::spelling-error pseudo-elements.
  

  January 15, 2015

  Working Draft.

  

  

  

Other pseudo-elements.

Recall that pseudo-elements are selectors that target elements that are not delimited by tags, unlike classes that target items that are in a given state. Many pseudo-elements are defined in the CSS Pseudo-Elements Module standardization module. Here is the list:

Selectors:

::after

A pseudo-element designating the location immediately after an element.

::before

A pseudo-element designating the location immediately before an element.

::details-content

This pseudo-element targets the detailed content of a details tag.

::file-selector-button

Targets the button in an input box of type file. This button has a different appearance in each browser.

::first-letter

A pseudo-element targeting the first letter of the paragraph.

::first-line

A pseudo-element targeting the first line of the paragraph.

::highlight()

Pseudo-element that targets the text selected after a search in the browser.

✗

::inactive-selection

Targets the selected element or text when the window it is on is not active.

::marker

A pseudo-element designating the marker in a list (bullet or number).

::placeholder

A pseudo-element designating the placeholder text in an input box (placeholder attribute).

⚠

::prefix

Target the punctuation characters that can precede the first letter of an element. Allows for a different styling of the first letter and the characters that come before it.

⚠

::search-text

Target the text searched by the internet user (browser search zone CTRL+F).

::selection

A pseudo-element that targets user-selected content.

::spelling-error

A pseudo-element that targets words or text with orthograph misspellings.

⚠

::suffix

Target the punctuation characters that may follow the first letter of an element. Allows for different styling of the first letter and the punctuation characters that follow it.

::target-text

Targets the text of the item designated by the url bookmark.