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
Related
I'm using a hack from this answer to make an image to resize on click (the checkbox method). It works fine. However, when I try to also apply a css style on a text on image click, it doesn't work:
<html>
<body>
<input type="checkbox" id="img-box"/>
<label for = "img-box">
<img src="http://www.al-van.org/AV/Manners_files/greeneyedcat.jpg"/>
</label>
<p id="some-text">
some text
</p>
</body>
</html>
#img-box:checked + label > img {
width: 100px;
}
#img-box:checked + p {
background-color: red;
}
What is my mistake here and how should I fix it?
The jsfiddle: https://jsfiddle.net/eus18r3h/
The input element with the id "img-box" is not a direct sibling to the p tag. #img-box:checked + p would only style a p tag which is directly next to the input, you have a label in between.
This would be the selector you are looking for '#img-box:checked + label + p'
You have used the adjacent sibling combinator (+) for your paragraph tag, but it only works if you have one element after another. So since you have the label tag in between, it doesn't work. If you just replace the + with the general sibling combinator ~ the code should work.
#img-box:checked ~ p{
background-color: red;
}
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');
});
});
I have a checkbox in label tag like this.
<label class="duck duck1">
<input type="checkbox">
</label>
I want if i click on checkbox, label and checkbox both should be display:none without jquery.
I tried this.
.duck input[type=checkbox]:checked + label.checkbox {display: none;}
jsfiddle
unfortunately, as i said before: using css, you can only select an element that comes after the one you clicked, not before and not a parent.
you can work around that however. Have a look at the following code:
if you reconstruct your html to have the label after the checkbox, and add the animated classes to the checkbox as well, to align it with the label:
<div class="main">
<input type="checkbox" class="duck duck1 cb_1"></input>
<label class="duck duck1"></label>
</div>
you will be able to select both in the following way:
input[type=checkbox].cb_1:checked,
input[type=checkbox].cb_1:checked + label {
display: none;
}
here is a fixed Fiddle
(the .cb_1 class is only meant for the z-index to make checkbox appear above the lable, and to avoid other checkboxes on the page hide irrelevant labels)
UPDATE:
another workaround would be to create the label (or duck image sprite) using the :after pseudo selector:
.duck:after{
content:'';
width: 50px;
height: 50px;
position: absolute;
}
here is an example with the :after selector: Duck Fiddle
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.