I am trying to have a checkbox change the content of a div but if the content isn't together (in the same div), then it will not work.
HTML:
<div>
<input type="checkbox" id="check">
<label for="check">Hello</label>
</div>
<div class="check"></div>
CSS:
.check:before {
display: block;
width: 100px;
height: 100px;
background: red;
content:'';
}
input:checked ~ .check:before {
content:'Content';
}
JSFiddle: https://jsfiddle.net/pgkwn4j6/
In your example one thats working is using "input:checked ~ .check:before" which selects "check" class div that is preceeding right after the input that is checked(sibling elements).
When you the put the label and input in a different div tag you need to select parent`s sibling which is not possible through css.
You can do it through Jquery.
CSS: how to select parent's sibling
above question showcases very similar problem you are having.
It does not work because it is not in the same div, in css you can not manipulate any element outside the parent element. To be able to manipulate an element outside you have to use jquery. Here your JSfiddle correct link:
JSFiddle Correct
$(document).ready(function(e) {
$('input#check').click(function(){
$('.check').toggleClass('show-content');
});
});
Related
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
When I'm nesting my checkboxes in a <div> element my code stops working. I need images to display upon checking a certain checkbox. Code works without nesting the checkboxes in a <div>.
I want my checkboxes to be nested in a <div> so that it changes the display value from none to inline-block in the <div> with the images upon selecting a certain checkbox.
I've tried everything but I think I just can't get my head around this problem.
<body>
<style>
input[type=checkbox]:checked.ivo ~ div #fotoivo {
display: inline-block;
}
input[type=checkbox]:checked.ian ~ div #fotoian {
display: inline-block;
}
input[type=checkbox]:checked.non ~ div #fotonon {
display: inline-block;
}
#fotoivo {
width: 200px;
display: none;
}
#fotoian {
width: 200px;
display: none;
}
#fotonon {
width: 200px;
display: none;
}
</style>
<!--Checkboxes (works without the <div> wrapped around)-->
<!--<div>-->
Ivo: <input type="checkbox" name="ivoian" class="ivo">
Ian: <input type="checkbox" name="ivoian" class="ian">
Non-binair: <input type="checkbox" name="ivoian" class="non">
<!--</div>-->
<!--Images that should change from display: none to inline-block.-->
<div>
<img id="fotoivo" src="ivo.jpg" alt="#">
<img id="fotoian" src="ian.jpg" alt="#">
<img id="fotonon" src="non.jpg" alt="#">
</div>
</body>
Tilda (~) is sibling selector. When you nest the inputs, the div wrapping images isn't their sibling anymore. As CSS doesn't have parent selector, you aren't able to do it with only css. But of course, you can do it with simple JS.
You can do something like this: https://stackoverflow.com/a/7691692/11404579
Edit: also, there is little bit hacky way to do it with just CSS, but you will lose the native inputs. You can place the inputs in root element, so you can select the images with sibling selector and hide the inputs. And in some nested element place labels for those hidden inputs. This way, when you click on (nested) label, you check the input a can control the content.
I'm trying to enlarge an image when hovering over it as well as showing a div with text while hovering over that image. The enlarging works, but showing the other div doesn't.
<div id="punt1">
<div id="puntnaam1" class="puntnaam">Ieplaan</div>
<img class="punt"src="ieplaan1.jpg">
</div>
For CSS I used:
.punt{
height: 100px;
width: 100px;
}
.puntnaam{
display: none;
}
.punt:hover{
transform: scale(3);
}
.punt:hover .puntnaam{
display: block;
}
What am I doing wrong?
You can't select previous siblings or parent elements in the DOM with CSS. You can only select next siblings or child elements.
e.g., if you changed your code to this:
<div id="punt1">
<img class="punt"src="ieplaan1.jpg">
<div id="puntnaam1" class="puntnaam">Ieplaan</div>
</div>
Then your selector could look like this:
.punt:hover + .puntnaam{
display: block;
}
Because now the <div> is the next sibling after <img>
See: Is there a "previous sibling" CSS selector?
You cant do something like that
.punt:hover .puntnaam{
display: block;
}
its not working that way in CSS cause puntnaam is already hidden,
You can use simple jQuery code to solve it
$(".punt").hover(function() {
$("#puntnaam1").show();
});
I have the following simple example where I animate the position of a given div through CSS's transition directive (http://jsfiddle.net/rtubio/dmhqjhd3/):
<input type='checkbox' id='toggle' class='toggle' />
<label for='toggle'></label>
<div id='area' class='area'>
<div id='area-title' class='area-title'></div>
</div>
... and I have the associated CSS code (see the JSFiddle) that animates the translation of the div -50px towards the bottom of the page whenever the label of the checkbox is clicked. If I move the checkbox+label to the inside of the div that I am trying to animate:
<div id='area' class='area'>
<div id='area-title' class='area-title'>
<input type='checkbox' id='toggle' class='toggle' />
<label for='toggle'></label>
</div>
</div>
... the animation stops working (see this second JSFiddle with the non-working example: http://jsfiddle.net/rtubio/k5o0uggu/). I have been looking for possible incompatibilities, but I have found none.
Does CSS have any restriction for this case?
Yes, CSS has a restriction that sibling combinators (+ and ~) can 'see' only following siblings of DOM element, i.e. elements that are direct children of the parent of given element and come later in the source order than this element. CSS can't select ancestors of the element. So you have to leave your checkbox outside and before .area to keep it possible to control .area by :checked state of the checkbox.
But since your checkbox is invisible and label transfers the clicks to it regardless its position in the DOM, you can move only label inside .area and modify your selectors respectively, e.g.
.toggle + div label {
text-align: center;
display: block;
position: relative;
}
.toggle + div label:after {
content: '(hide)';
}
.toggle:checked + div label:after {
content: '(show)';
}
See edited fiddle
Your problem is .toggle:checked ~ .area as you have placed .toggle within .area it has nothing to change the position on if you place another div below add a class and change the css to
.toggle:checked ~ .newclass
everything should work
I have a checkbox which hides/shows a div. It works when I put the checkbox directly above the div. When I place the checkbox somewhere else in the page (for better usability) it doesnt't work. Is there a way to target a certain div to make the checkbox work from everywhere on the page?
Here is the HTML-code:
<input type="checkbox" id="toggle-result" checked="checked"> </input>
CSS:
input[type=checkbox]:checked ~ div {
display: none;
}
Using CSS, you can select child elements and adjacent elements, so what you are trying to do will work if div is placed right after the checkbox but if you want to make it work when div is somewhere else(above the checkbox), you need to use JavaScript, if it's after, you can use + to select adjacent element or nested adjacent element
Demo
<input type="checkbox" />
<div>Toggle Using CSS</div>
input[type=checkbox]:checked + div {
display: block;
}
div {
display: none;
}
Targetting div which is farther away somewhere (But not before the checkbox) like this
Demo 2
input[type=checkbox]:checked + a + .blah .target {
display: block;
}
.target {
display: none;
}
<input type="checkbox" />
Dummy Link
<div class="blah">
<div class="target">Complicated Selector, Isn't It?</div>
</div>
Explanation : input[type=checkbox]:checked + a + .blah .target Over
here we select the checkbox which is in a checked state, and than we
chain this by selecting the adjacent element which is an anchor tag,
and than we select another adjacent element which is adjacent to a
tag which is div with a class .blah, and than we select nested child element with a class .target
Using jQuery To Do (Doesn't matter where the target element is) Demo 3
<input type="checkbox" id="checkme" />
Dummy Link
<div id="show_on_check" style="display:none">
This content should appear when the checkbox is checked
</div>
$(document).ready(function() {
$('#checkme').change(function() {
$('#show_on_check').toggle();
});
});
input[type=checkbox]:checked ~ div {
display: none;
}
Will select every div element that is preceded by a input that is checked. The reason why it probably breaks is because the input is not preceding the div (Like you state in your question)
Use the element IDs in your selectors:
<input type="checkbox" id="toggle-result" checked="checked"/>
<div id="myDiv">showme</div>
<style>
#toggle-result:checked ~ #myDiv {
display: none;
}
</style>
having a blonde moment here, trying to use CSS to tell a divider to change its background once an input has focus.
<p>
<label>Your Name</label>
<input type="text" name="your_name" id="your_name" value="" />
<div class="formhelper">Please enter your full name,<br />Character limit of 255</div>
</p>
Thats the HTML code, now I've tried the following but can't get it to work
.appformwrapper input:focus + div {
background-color: #CCC !important;
display: block;
}
.appformwrapper div ~ input:focus {
background-color: #CCC !important;
}
.appformwrapper input:focus {
background-color: #EEF;
}
Any ideas? I've done this once before in CSS but can't find me blasted code :(
It's not valid HTML to have a div in a p. Browsers will take your markup and treat it as this:
p
label
input
div
Which means your div actually comes after the p, rather than being inside it. So while you're trying to select a div that comes after an input, it won't work because the div doesn't exist in that position.
If you can change your p to another div, or your existing div to a span, your CSS should work. I'm not sure what exactly your second rule is supposed to do either, but it still won't work, as the general sibling selector ~ doesn't look at previous siblings.