Currently, I am working on creating a basic multilingual static website using only HTML5, CSS3, and vanilla JavaScript. The structure of the HTML looks something like this:
<html>
<head>
<title>WEBSITE</title>
</head>
<body>
<header>
<h1 lang="en">ENGLISH HEADER</h1>
<h1 lang="fr">FRENCH HEADER</h1>
...
</header>
<main>
<article lang="en"><p>...</p></article>
<article lang="fr"><p>...</p></article>
...
</main>
</body>
</html>
By default, my website is set to display in English. To achieve this, I have added the following CSS:
header h1:not(:lang(en)), main article:not(:lang(en)) {
display: none;
}
As users can change their preferred language using a <select> element with an onChange="" event that triggers a JavaScript function. Although I am not very familiar with JavaScript, I am curious to know if it's possible to update the styling based on the user's selected language without using any frameworks or libraries.
I have intentionally chosen to avoid using JS frameworks and jQuery to keep the website as straightforward as possible. Any suggestions on achieving this would be greatly appreciated.