Good Day,
How can I change language in one HTML template only using pure CSS?
I tried this:
body.en :lang(it) {
display: none;
}
body.it :lang(en) {
display: none;
}
<html>
<body class="it">
it
en
<button onclick="document.body.className='en'">english</button>
<button onclick="document.body.className='it'">italiano</button>
<body>
</html>
But onclick is still a javascript if im not wrong?
body.en [lang='it'] {
display: none;
}
body.it [lang='en'] {
display: none;
}
And you can toggle this by add default language class to body tag:
<body class='en'></body>
And add js:
document.querySelector('.lang-switch-button').addEventListener('click', function() {
document.querySelector('body').classList.toggle('en')
document.querySelector('body').classList.toggle('it')
})
The question is about pure css. Of course one could achieve this with javascript. But there are several ways to do it with pure css.
You could use the :target selector in combination with ordinary links (instead of buttons) to choose the language like this:
.main-content {
display: none;
}
.main-content:target {
display: block;
}
italiano
english
<div class="main-content" id="it">
...
</div>
<div class="main-content" id="en">
...
</div>
Another solution is using radio boxes or in combination with the :checked selector:
.main-content {
display: none;
}
#it:checked ~ .main-content[data-lang=it] {
display: block;
}
#en:checked ~ .main-content[data-lang=en] {
display: block;
}
<input type="radio" name="lang" id="it" />
<label for="it">italiano</label>
<input type="radio" name="lang" id="en" />
<label for="en">english</label>
<div class="main-content" data-lang="it">
contenuto italiano
</div>
<div class="main-content" data-lang="en">
english content
</div>
But if your site has large content, you should consider to separate them in individual files.
Related
So far I've tried to use this code:
CSS Code:
/*global*/
html,
body {
width: 100;
margin: 10;
padding: 10;
font-family: Avenir, sans-serif;
}
/*functions*/
.multi-level,
.item ul,
.nav input[type="checkbox"] {
display: none;
}
#menu:checked ~ .multi-level,
.item input:checked ~ ul {
display: block;
}
HTML :
<body>
<p style="font-family: 'Avenir'; text-align: center">
"What is this website about?" Info about select Macs and frequently asked
questions.
</p>
<div class="nav">
<input type="checkbox" id="menu" />
<label for="menu">☰</label>
</div>
<div class="multi-level">
<div class="item">
<input type="checkbox" id="A" />
<label for="A">Mac Mini</label>
<ul>
<li>2005-2006 (PPC)</li>
<li>2006-2010 (Polycarbonate Mini*)</li>
<li>2010-2018 (Aluminium Mini*)</li>
<li>2020-Present (M1 Mini)</li>
</ul>
</div>
</div>
</body>
The dropdown menu isn't working for some reason, I've tried adding visibility: visible; and visibility: show; doesn't seem to do anything.
I've tried to use Firefox and Safari, doesn't work on either of them could it be a browser related issue?
Note: I'm on the latest versions of both of them.
Your problem is that this selector doesn't select anything:
#menu:checked ~ .multi-level {
display: block;
}
Your div.multi-level isn't a sibling of #menu, it's a sibling of .nav. But there's no CSS parent selector, so the only way to really fix this problem with a pure CSS solution is to restructure your HTML. You could get rid of div.nav, or you could move div.multi-level inside of div.nav right after label for="menu" or whatever else works for you.
Alternatively, you can use a JavaScript solution to toggle a class on one or more elements.
Hi:) I'm trying to run the simplest example of :not(:placeholder-shown) and its not workings.Here is a link to my codepen. https://codepen.io/yael-screenovate/pen/eYJEqRB?editors=1100 what did i do wrong? thanx by advance. Heres the code:
button {
display: none;
}
input:not(:placeholder-shown)+button {
display: block;
}
<div>
<input/>
<button>hi there</button>
</div>
It's because you didn't set any placeholder attribute.
button {
display: none;
}
input:not(:placeholder-shown)+button {
display: block;
}
<input placeholder="placeholder"/>
<button>hi there</button>
It makes more sense not to use the :not but do the whole logic the opposite:
button {
display: block;
}
input:placeholder-shown+button {
display: none;
}
<input placeholder="placeholder" />
<button>hi there</button>
I'd like to create a collapsible button highlighted as href for my academic website, and got an answer here: HTML Collapsible Button - How to highlight the button as href?
However, when I create more than one buttons, the top button opens all the hidden texts (please see my code below). Could I modify the code so that each button only opens the hidden text just below it, or opens a specified hidden text?
CSS:
label {
color: blue;
}
label:hover {
text-decoration: underline;
cursor: pointer; }
#hidden {
display: none;
}
:checked~#hidden {
display: block;
}
Html:
<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div id="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div id="hidden">2nd abstract</div>
The same id can be used one time per page. So we have to use class instead of id. Also we should use Adjacent sibling combinator instead of General sibling combinator
label {
color: blue;
}
label:hover {
text-decoration: underline;
cursor: pointer; }
.hidden {
display: none;
}
input:checked+label+.hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div class="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div class="hidden">2nd abstract</div>
Yes, provided the HTML structure is reliable and consistent.
Change:
:checked~#hidden {
display: block;
}
to
:checked + label + #hidden {
display: block;
}
However, you can't have multiple items with the same id attriubte - use a class instead.
I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:
#hidden {
display: none;
height: 100px;
background: red;
}
:checked+#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.
How can I fix this ?
Thanks!
You want to use a different CSS selector. The below uses the General sibling combinator to target the div no matter its order with respect to the input element (so long as it follows it).
#hidden {
display: none;
height: 100px;
background: red;
}
:checked ~ #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
use negation instead of +, so that it will select all divs related to that class name
#hidden {
display: none;
height: 100px;
background: red;
}
:checked~#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
I have a radio button which id is someID-1 and a div which id is navi1.
<input name="nappi" type="radio" id="someID-1" />
<div>
<div id="navi1">
<div style="z-index:100;position:fixed;right:0;top:0;bottom:0;">
<label for="someID-2">2</label>
</div>
</div>
</div>
This CSS code works just fine:
div[id^="navi"] {
display: none;
}
But this does not work OK:
input#someID-1:checked #navi1 {
display: block;
}
How should I modify the code?
I have tens of radio buttons (id names between someID-1 and someID-99). I would like to have dynamic code.
I do not want to use JavaScript.
You can make like this. you can read the details of the selector that i used here
#navi1{
display: none;
}
input[type="radio"]#someID-1:checked + div #navi1{
display: block;
}
.box{
border: 1px solid #ddd;
width: 200px;
height: 200px;
text-align: center;
}
<input name="nappi" type="radio" id="someID-1" />
<div class="box">
<div id="navi1">
<div>
<label for="someID-2">2</label>
</div>
</div>
</div>
You need to navigate the document hierarchy correctly in your CSS. So this works:
div[id^="navi"]
{
display: none;
}
#someID-1:checked + div div {
display:block;
}