Why isn't this working for me in Chrome when I click the 2nd radio button? Paragraph 2 stays highlighted and paragraph 4 doesn't get highlighted. Is this a Chrome bug?
HTML:
<input type="radio" name="toggler" checked />
<p>Paragraph one</p>
<p>Paragraph two</p>
<input type="radio" name="toggler" />
<p>Paragraph three</p>
<p>Paragraph four</p>
CSS:
:checked + p + p {
color: red;
}
I think you have the same issue as described here:
Webkit bug with `:hover` and multiple adjacent-sibling selectors
As a workaround just add :checked ~ p {} (intentionally empty) and it works:
http://jsbin.com/abeniy/7/edit
That is strange behaviour. I think it has something to do with the <p> being siblings of the input element, and not children. I found a bit of a hack as a work around. You simply surround each input and p block in a div. Then use the ~ selector...
the css:
input:checked ~ p + p {
color: red;
}
the html:
<div>
<input type="radio" name="accordion" checked />
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>
<div>
<input type="radio" name="accordion" />
<p>Paragraph three</p>
<p>Paragraph four</p>
</div>
the demo:
http://codepen.io/lukeocom/pen/CABes
UPDATE:
I just noticed if you add this css to your original html, then it works too. Im not sure why though as the second selector style is empty...
input:checked + p + p {
color: red;
}
p:nth-child(2){}
Related
The CSS worked perfectly fine with the old HTML, but i have to change to the new HTML (nested checkbox.
I cannot figure out how to change my CSS to make that happen.
/*Old CSS:*/
.cl1 .clChk:checked ~ .cl2 {
opacity: 1;
height: auto;
}
<!--OLD HTML-->
<div class="cl1">
<label class="clLabel" for="chk_1">some text</label>
<input class="clChk" type="checkbox" id="chk_1">
<article class="cl2">
..some text..
</article>
</div>
<!--NEW HTML-->
<div class="cl1">
<label class="clLabel"><input class="clChk" type="checkbox">Some text</label>
<article class="cl2">
..some text..
</article>
</div
I have tried many variations, but i cannot seem to get it to work; so if the checkbox isn't nested in the label, there is no issue, but i need the checkbox nested in the .
Thank you so much for your help!
deduijk! You miss the dot at the begning on cl1Chk element.
.cl1 clChk:checked {
}
to
.cl1 .clChk:checked
I'm trying to target a span class located inside a label. Is this possible with css? I can affect the label, but I would really like to change the background color of item_title:
<style>
.item input[type=checkbox]:not(old):checked + label + item_title,
.item input[type=radio]:not(old):checked + label + item_title,
.item input[type=checkbox]:not(old):checked + span + label + item_title,
.item input[type=radio]:not(old):checked + span + label + item_title {
background: #007cd1;
}
</st
<div class="item">
<input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
<label style="height:250px;" for="tv_starter"><span class="item_title">Starter TV</span><br />Our Starter TV Package, $45.00</label>
</div>
This is entirely possible. But you have to correct some errors in your code.
First, I'm not sure what not(old) refers to. Is old a classname?
Second, regarding classnames. Be sure to refer to them in your css with the class identifier ., so .item_title is the right way to refer to that class.
Third, there are different types of combinators within css. + is the adjacent sibling combinator. > is the child combinator.
In your html, label is the adjacent sibling of your input, and .item_title is the child of label.
Finally, you are trying to use the [type=checkbox] type selector when you should be using [type=radio] to match your html.
See below and give this a good read: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
.item input[type=radio]:checked + label > .item_title {
background: #007cd1;
}
<div class="item">
<input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
<label style="height:250px;" for="tv_starter"><span class="item_title">Starter TV</span><br />Our Starter TV Package, $45.00</label>
</div>
Your css is invalid. Use this one to make an input[type='radio'] blue if he is selected:
.item > input[type='radio']:checked ~ label > .item_title {
background: #007cd1;
}
<div class="item">
<input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
<label style="height:250px;" for="tv_starter">
<span class="item_title">Starter TV</span>
<br />Our Starter TV Package, $45.00
</label>
</div>
Since the span is a child of the label not a sibling you need
.item input[type=checkbox]:not(old):checked + label > item_title /* etc*/
{
background: #007cd1;
}
I have the following fragment:
<div>
<input type="radio" class="A">
<input type="radio" class="B">
</div>
<div class="A"></div>
<div class="B"></div>
I would like to select a div, who is following a div containing a checked radio button having the same class.
If I understand level 4 selectors correctly, this might do the job:
div:has(>input[type="radio"].A:checked) ~ div.A,
div:has(>input[type="radio"].B:checked) ~ div.B
But my browser does not support the :has pseudo class.
Is it possible to work around this without level 4 support?
I have a container with several p elements and several input elements. I need to select the last p element inside this container, and for some reason I'm not able to. I've tried several methods but non seem to work. It must be last-child and not nth-child since there might be more elements in the future. Whats the difference between last-of-type and p:last-child?
JSfiddle here.
HTML:
<div id="inputContainer">
<p class="contact_title">EMAIL</p>
<p>john#snow</p>
<p class="contact_title">PHONE</p>
<p>123-hodor-hodor</p>
<p class="contact_title">ADDRESS</p>
<p>castle black</p>
<input id="name" placeholder="Name">
<input id="email" type="email" placeholder="Email">
<input id="phone" type="number" placeholder="Phone">
<textarea id="note" placeholder="bla bla"></textarea>
</div>
CSS:
/* not working 1 */
#inputContainer :last-of-type p {
color: red !important;
}
/* not working 2
#inputContainer > p:last-child {
color: red !important;
}
not working 3
#inputContainer p:last-child {
color: red !important;
} */
use css selectors in this way..it will work. use p before last of type..or else it won't work.
#inputContainer p:last-of-type {color:red;}
:last-of-type is the last element of this specific type...
So p:last-of-type would be the last p element amond all the siblings.
:last-child only triggers if it really is the last child
<div>
<p></p>
<p></p>
</div>
Here the second <p> would trigger p:last-child, because it is the last child of the <div> element
<div>
<p></p>
<p></p>
<img />
</div>
Here p:last-child would not trigger, because neither of the 2 <p> are the last child of it's parent, in fact the last child is an <img>
p:last-of-type would be triggered by the 2nd <p> though, because that is the last <p> among all 3 siblings
HTML:
<label>
<input type="checkbox" />
</label>
<div>
stuff
</div>
I'd like to be able to style the DIV element depending on the checked state of the input, like
input ~ div{
display: none;
}
input:checked ~ div{
display: block;
}
Obviously the~ selector doesn't seem to work here. Neither does +
Is there any other solution (besides javascript) ?
Try this, im not sure what its cross browser compatibility is.
input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}
This should work, but I wouldnt do it, I would do Javascript.
See my jsfiddle
Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.
I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:
<label>
<input type="checkbox" />
<div>
stuff
</div>
</label>
Edit:
Or this (thanks to #lnrbob for pointing it out)
<label for="myCheckbox">
This is my label
</label>
<input id="myCheckbox" type="checkbox" />
<div>
stuff
</div>
if any one need extra solution
<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>
<div>
show when check box is checked
</div>
and the css
#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }
happy coding !!!