Exclude CSS selectors keep parts of a page in the source language. Everything that holds text is translated by default, so this is a way to take content out rather than to add it in.
These settings live on the project's Translation Rules screen, in the Include CSS Selectors and Exclude CSS Selectors fields. Enter one selector per line.
How it works
There is no list of tags to opt into. Any element that directly contains text is translated: a heading, a paragraph, a button label, a table cell, and a bare <div> or <span> that holds text are all treated the same way.
Exclude selectors run before anything is extracted. A matched element and everything inside it is removed from the translation entirely, so its content is never sent anywhere.
What is never translated
Without any configuration, these are left in the source language:
<script>,<style>and<noscript>tags<pre>blocks- Elements with the
.notranslateor.no-translateclass - Elements with a
translate="no"attribute - Elements with an
hreflangattribute
A <code> element on its own is not on that list. Code inside a <pre> block is protected, but <code> used inline is translated along with the sentence around it, so wrap it in .notranslate if it must stay verbatim.
WordPress sites
On WordPress, two more exclusions apply automatically:
#wpadminbar(admin toolbar).wp-admin(admin elements)
Include CSS Selectors
This field does not narrow translation, and filling it in does not change what is translated. Everything holding text is already picked up, so there is nothing for an include selector to add. Leave it empty.
If you are looking for a way to translate only one section of a page and leave the rest alone, that is not something the field does. Exclude the parts you want left in the source language instead.
Exclude selectors
Use exclude selectors to keep specific sections in the source language. Content inside an excluded element is ignored completely.
Examples
.pricing-table
#code-examples
.api-reference
.user-generated-content
[data-no-translate]
footer .copyright
When to use
- Code blocks or technical reference sections
- User-generated content that should stay in the original language
- Pricing or numerical data that should not be modified
- Third-party embeds that handle their own localization
- Navigation elements that should remain in the source language
- Legal text that must stay in the original language
If you can edit your HTML, the easiest way to exclude an element is to add translate="no" or class="notranslate" directly in your source code: no dashboard configuration needed.
<h1 translate="no">WP Rocket</h1>
<p class="notranslate">This stays in the original language</p>
Selector syntax
Universally supports standard CSS selector syntax:
| Selector | What it matches | Example |
|---|---|---|
.class |
Elements with a class | .sidebar |
#id |
Element with an ID | #footer |
[attr] |
Elements with an attribute | [data-translate] |
[attr="value"] |
Elements with a specific attribute value | [role="navigation"] |
.parent .child |
Nested elements (descendant) | .blog-post .title |
.parent > .child |
Direct child elements | .nav > .item |
Validation rules
- Each selector must contain at least one
.,#, or[character - The wildcard
*selector is not allowed (it would match everything) - Maximum selector length is 200 characters
- Empty lines are ignored
A selector that fails any of these is discarded without a warning, so a rule that appears to do nothing is worth re-reading before it is worth debugging.
Aim at the container you mean
An exclusion takes the whole subtree. .pricing-table and .faq-item .answer are the right size; .content, #page and .entry-content wrap most of a page, and excluding one of those leaves nearly the whole page untranslated with nothing reported.
Common patterns
Exclude a section but translate a part of it
This is not supported. An excluded element removes everything inside it, and there is no way to bring part of it back. If you need to translate part of an excluded section, restructure the HTML so the translatable part sits outside the excluded container.
Exclude chat widgets
#intercom-container
.drift-widget
.tawk-widget
[id^="hubspot-messages"]
Exclude code documentation
.code-block
.api-endpoint
pre code
.syntax-highlight
Related settings
Exclude Link Localization: prevent internal links from being rewritten with language prefixes
Exclude Pages: skip entire pages from translation based on URL paths
Tips
- Use browser DevTools to find selectors. Right-click an element, select "Inspect", and note the class or ID.
- Be specific.
.sidebar .widget-titleis better than.widget-titleif you only want to target sidebar widgets.