Exclude HTML content from translation using CSS selector

Table of Contents

Add website content to exclude from translation

Content exclusion is a global rule that avoid the translation of a global part of your website, very quickly. 

This is some important rules that helps to exclude from translation, for example a large part of your website that has no interest to be translated. To add such rule, connect to your Linguise dashboard > click on Rules > Add new rule.

Add-new-CSS-rule

You will then be able to add the replacement details, mainly:

  • The HTML content where you want to apply the translation exclusion
  • The URLs where the exclusion will be applied
  • The languages where to apply the exclusion 
  • The rule title (visible only by you in Linguise dashboard)
add-css-selector

Exclude HTML content from translation

The text exclusion can be executed in a part of your HTML content using one or several CSS selectors. Using your browser code inspector, you get any CSS selector and add it as fallowing. 

Get a CSS selector, a class or an ID:

css-selector

And add it in the rule setup:

In this example: the HTML content that is in all .blog CSS selector will be excluded from the translation

Exclude HTML content by URLs

Once you’ve setup the CSS selector to exclude from translations, you can apply the exclusion also for website URLs (using ALL URL option) or on some specific pages URLs.

  • Original URL / Translated URL: exclude from translation a specific URL from the original language or from a specific URL from a translated language
  • Wildcard / Regular expression: replace the text from translation on a specific URL using wild card or regular expression
HTML-ignore-in-URL

In this example:  .blog CSS selector will be excluded from the translation from the translated pages in ALL the website URLs that starts by www.domain.com/shop/

Several URLs conditions can be mixed to cover, for example, several translated languages URLs.

Exclude HTML content by language

The content exclusion you’ve added can be applied only in some specific language or in all languages. This is pretty handy as some CSS selector may be different some part of your website, translated or not.

exclude-html-by-language

In this example: .blog CSS selector will be excluded from translation only in Spanish language.