I have a form where if someone checks a specific input, I want it to show a div. The problem is that the input does not share the same parent as the subsequent div (and can't, for framework reasons). So for example:
<div>
<input id="test" type="radio">
</div>
<div id="ShowIfTestIsChecked">
<!--content to show if test input is checked-->
</div>
This CSS almost works, but is broken by the fact that the div I want to show is not inside the parent of the input:
#test ~ #ShowIfTestIsChecked{
display:none;
}
#test:checked ~ #ShowIfTestIsChecked{
display:block;
}
Is there some other CSS trick I can use here to make this work? This is easy to do with javascript, but I'd like a CSS only way to do it.
Doing this in css would require being able to select the parents div and then the next div which isn't possible in css, You can only select the next or children elements in a css selector.
Why do you want to wrap the input in a div in the first place?
Gimme a sec I'll post an update with css trick that works they way you want but requires changing the first div element into a form element.
So you have to chance the html or us js.
For html you've got 2 options , put the content of each div together or use a form element:
<form>
<input id="trick" type="radio" name="trick" required />
</form>
<div id="ShowIfTestIsChecked">
Hello world
</div>
#ShowIfTestIsChecked {
display: none;
}
form:valid ~ #ShowIfTestIsChecked {
display: block;
}
Just put your checkbox and div together:
<input id="test" type="radio">
<div id="ShowIfTestIsChecked"></div>
#test:checked ~ #ShowIfTestIsChecked {
display: block;
}
There's no other CSS-way.
Related
I'm trying to hide parents pseudo element ::before hide on input focus and it shouldn't work on button focus. Currently it looks like this
.parent::before{
content: 'default';
}
.parent:focus-within::before{
display: none;
}
<div class="parent">
<input type="text">
<button>awd</button>
</div>
and it doesn't seem to work. I don't want to involve any js/jquery. Would be great if there any vanila css or atleast scss solution.
Thanks in advance!
You can't do that with parent focus to control pseudo element, cause button and input both trigger focus on parent, you can't approve one and disapprove another. Instead, you can wrap input to do that.
label::before{
content: 'default';
}
label:focus-within::before{
display: none;
}
<div class="parent">
<label>
<input type="text">
</label>
<button>awd</button>
</div>
I was trying to use
.myDivName button:nth-child(2) {
background-color: red;
}
to select my second button in <div class="myDivName"> but it doesn't work. The code I have is -
<div class="myDivName">
<button>
1
</button>
<input type="text">
<button>
2
</button>
</div>
but I found that if I deleted the <input> in between, then nth-child would work.
How can I properly select this button using nth-child(2)? If nth-child cannot be used, what's the best way?
Thanks!
fiddle - https://jsfiddle.net/e6au4hot/9/
Use nth-of-type instead:
.hi > button:nth-of-type(2) {
background-color: red;
}
jsFiddle example
You're concerned with the type of element, not the position in the hierarchy
I have :
<div class=mystyle>
<input type=checkbox>
<div>
<div>
<div>
.....
</div>
</div>
</div>
<div>// this is what I want
</div>
</div>
I want to create a css style to be applied to the last div at the same level of element or also can be the second div ...
I think I could use [attribute] approach but... Is there any way to use another selector ?
It is possible I could have more than one input-div-div structure inside mystyle input:checked ?
you may use
input ~ div:last-of-type {
color: green;
}
this selector will pick the last sibling div of your input
example: http://codepen.io/anon/pen/pvwEoB
I am using a CMS which when building a form wraps all it's contents with what it calls an "anonymous div" to comply with XHTML, unfortunately the theme was designed without this insight and there fore the submit button CSS is:
.contact form div.control input[type=submit]
This works if the markup is:
<section class="contact">
<form>
<div class="control">
<input type="submit" />
However because this additional DIV added by CMS:
<section class="contact">
<form>
<div>
<div class="control">
<input type="submit" />
How can I write the CSS a bit more adaptive so extra markup doesn't affect it so much, but without styling the individual element via ID or class???
Alex
Your selector should still select the input, the div won't affect that. If the div is causing layout problems, you might need to make it an inline element like this:
section > form > div { display: inline }
You should be able to just add:
.contact form div div.control input[type=submit]
or
.contact form div .control input[type=submit].
Either should work fine.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.