How to display/hide content in a specific language?

In this article, you will learn how to display and/or hide content in a specific language.

1. Create 2 different elements

2. Add CSS selectors for each element

3. Add some custom CSS

4. Apply CSS on one specific page

5. Additional information

If you would like to display certain content only in a specific language (for example, a button with a link), follow the steps below:

1. Create two different elements

In your original website, create two elements:

One for your original language
One for the translated language

Both elements will exist in your original version, but only one will display at a time thanks to a CSS rule.

2. Add a CSS selector for each element

Assign a unique CSS selector (class or ID) to each element. For example:

link-en for the English version
link-es for the Spanish version

Not sure what a CSS selector is? See the section “What is a CSS selector?” below.

3. Add some custom CSS

Once you have added the class/ID to the elements you wish to hide/display, go to your Weglot Dashboard > Select your project > Settings > Language Switcher and enter this code into the "Custom CSS" field:

html:not([lang="en"]) .link-en{   
   display: none!important; 
}
html:not([lang="es"]) .link-es {   
   display: none!important; 
}

How it works:

:not() is a CSS pseudo-class meaning “when it is NOT this language.”
For example, html:not([lang="es"]) means “hide this element when the selected language is not Spanish.”

Don’t forget to:

Replace en and es with the correct language codes for your site
Replace .link-en and .link-es with your actual class or ID names

Not sure how to access your source code? Find more information below.

If your original language is English with an en-US short code, here is the final code you'll have to use:

html:not([lang="en-US"]) .link-en {
   display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}

Finally, if you'd like to apply the code for a third language, such as German, you can add just one line of custom CSS. It will look like this:

html:not([lang="en-US"]) .link-en {
  display: none!important;
}
html:not([lang="es"]) .link-es {
   display: none!important;
}
html:not([lang="de"]) .link-de {
  display: none!important;
}

4.Apply CSS on a specific page

Sometimes, you may want to apply custom CSS only on certain pages of your website. For example, you might want to hide the Weglot switcher on URLs containing /widget , or exclude specific elements only on blog pages.

This can be done using advanced CSS selectors that rely on the page’s canonical URL or hreflang tags available in the page’s <head> .

By using the CSS pseudo-class :has() combined with attribute selectors, CSS can “detect” whether the current page URL contains a specific path.

⚠️ This method only works if your site includes canonical or hreflang tags in the DOM. Without them, it’s not possible to target URLs using CSS alone.

Example: Hide the Weglot switcher only on /widget pages

html:has(head link[rel="alternate"][hreflang="en"][href*="/widget"]) .weglot-container {  display: none; }

This will hide the Weglot language switcher only on pages containing /widget , while keeping it visible everywhere else.

5. Additional information

What is a CSS selector?

CSS selectors are used to find or select HTML elements (elements on your pages) that you want to style, edit, or, in our case, hide. When you add content to your original website, you should be able to add a CSS selector to it.

For example, you can either:

- Find a dedicated field depending on which CMS, app, or plugin you are using to create the content:

- Manually add the class or the ID by yourself directly in the HTML, so it looks like this:

<a class="link-en">English button</a>
<a class="link-es">Botón en Español</a>

After that, you'll have to use CSS rules to hide the element that should not be displayed according to the selected language.

How do I access my source code?

To access your source code, you can right-click anywhere on your website homepage and click on "View Page Source":