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;
}
Related
There is an "icon" next to the input. I want that when I click on the input, give that icon a background (In the sample with the color I just want to test it).
I already tried some of the answers what I found here, but didn't work.
<div class="part">
<i class="fas fa-info-circle"></i>
<input type="text" name="contactName">
</div>
And the CSS:
.contact .part input:focus + i {
color: red;
}
When I tried with label, without + symbol or something else, It didn't work either. I don't know what is the problem.
The sibling selector (+) only points in one direction, so that when you say foo + bar, you're selecting bar only when it directly follows foo.
Conceptually, the CSS works something like this:
Within the elements of class container, look for any elements of class part, and inside that element, look for any input that has focus. If it's directly followed by an i element, color that red.
In your case, the CSS will only apply if i comes after the input.
You can change the order of the <input> and the <i> element in the HTML. Style .part as a flexbox (or inline-flex), and then use order: 1 on the <input> to visually position it after the <i>. Now the input:focus + i will work:
.part {
display: flex;
justify-content: flex-start;
}
.part input {
order: 1;
}
.part input:focus + i {
color: red;
}
<div class="part">
<input type="text" name="contactName">
<i class="fas fa-info-circle">X</i>
</div>
Imagine this html structure:
<p><a></a></p>
<div><a><img></a></div>
I want to hide all images inside a div after a p tag, to do that, I simple use this code:
p + div {display:none;}
but when I try to show those images by hover the anchor inside the p tag before, it doesn't work the same way by using this:
p > a:hover + div {display:block;}
if I use only p instead:
p:hover + div {display:block;}
it works, but it's not what I pretend.
Since a it's a child of p tag, adjacent sibling "+" doesn't work?
Since a it's a child of p tag, adjacent sibling "+" doesn't work?
Correct. The div is a sibling of the p, not the a.
You could set pointer-events for the p to "none", and pointer-events for the a to "auto".
You could then use your working p:hover + div code, but it would act like it's working for the anchor only:
p + div {
display:none;
}
p {
pointer-events: none;
}
a {
pointer-events: auto;
}
p:hover + div {
display: block;
}
<p>
This is an anchor. <br>
Lorem ipsum et cetera.
</p>
<div>
Cool picture:
<a>
<img src="http://lorempixel.com/50/50">
</a>
</div>
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.