I want to select CSS element that are outside of the parent selector. Can I do that with just CSS? Below are the example that I want to achieve:
<p>Register Form</p>
<div>
<p>Full Name :</p>
<p><input type='text' name='name' required></p>
</div>
<p>Please fill in the box above</p>
I want make the <p> after the div to be hidden if the input type is not empty. Below are the style that I have tried but with failed result:
<style>
div > p input:required:valid + p {
display: none;
}
</style>
Sadly this can't be done with pure css. You can't modify parents of elements with css, only children and subsequent siblings.
You could have javascript toggle a class on the parent div when its child input is valid/invalid, and then use CSS to modify the parent div's sibling.
Related
I want to target a div when a checkbox is checked. Can anybody tell me how can I target an outer div when checkbox is checked?
if($('.checkboxClassName').checked) {
$(this).parent();
}
It will target the parent div that the checkbox is inside, you can use more .parent() if tour target is not inside the same parent.
example: if your code is like this:
<div class="container">
<div class="target"></div>
<div class="parent">
<div class="checkboxDiv">
<input type="checkbox">
</div>
</div>
</div>
and you want to target the div.target you'll need the code like this:
if($('.checkboxClassName').checked) {
$(this).parent().parent().parent().find(".target").css('background','magenta');
} else {
$(this).parent().parent().parent().find(".target").css('background','cyan');
}
those parents will work like this: $(this).parent() = targeting div.checkboxDiv
$(this).parent().parent() = targeting div.parent
...
Note how this jsFiddle highlights the usage in a very simple way:
A check box is focused upon (checked).
The CSS style :checked catches this occurrence and applies a CSS style to the div contents.
The div can be another element you want, just make sure you play around with the code and adapt it to your needs. Let us know if you need any more help!
Source: :checked
HTML
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
CSS
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
Edit: I thought you would like a reference to 'how' CSS works here:
Attribute Selector by value
Element plus Element
...and in general CSS selectors
I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?
On this jsFiddle can you see what I am trying to explain..
I tried this but that didn't work:
css
.login form input:focus .login{
display:block;
}
I also tried this css
.login > form > input:focus .login{
display:block;
}
html of the login button and the associated drop-up div
<li class="right"><p>Log In</p>
<div class="login">
<form>
<h1>Log In</h1>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<br>
<div class="submit">Log In</div>
</form>
</div>
</li>
I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.
First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".
In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).
But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.
You will surely have to use JS for this. We cannot select parent element via CSS.
Question that will help you understand this:
Is there a CSS parent selector?
One more ref. here:
http://css-tricks.com/parent-selectors-in-css/
Hope you will like jquery for achieving this:
http://api.jquery.com/parent/
Enjoy Coding!!
I am facing an issue when using the :last-child pseudo selector.
I have the following markup:
<div class="apply_container">
<form class="margin">
<div class="apply_inn border">
<span>Tell me why you want the job?</span>
</div>
<div class="apply_inn">
<span>Some other details</span>
</div>
<div class="apply_inn location">
<span>Apply at a particular location</span>
</div>
<div class="form-actions">
<button type="submit" class="pull-right btn btn-info">
Submit
</button>
</div>
</form>
</div>
And apply these styles:
.apply_container .apply_inn {
border-bottom: 1px dashed #E6E6E6;
margin: auto;
padding: 18px 0;
width: 790px;
}
.apply_container .apply_inn:last-child {
border:none;
}
My goal is to prevent the last div.apply_inn from being styled with a bottom-border like the rest of the div.apply_inns. The style does not seem to get applied. Can anyone explain what is happening?
Here is the original fiddle of my problem. As well as a simplified fiddle demonstrating the issue.
The problem is that the div with class .apply_inn is not the last-child within its parent. The CSS last-child pseudo-class operates as follows:
The :last-child CSS pseudo-class represents any element that is the
last child element of its parent.
When ready very literally, it will only apply to an element that is the last child within its parent. It does not take into consideration the context you (mentally) create when you add the additional class selectors to it.
When applying the pseudo-class the browser doesn't understand the context created by the selector. Basically, its checking that the element matches the selector .apply_container .apply_inn, then asking the question, "Is this the last child within the parent?". It asks this question without any consideration of the aforementioned selector. In your case, the answer is no since there is another div after the last div.apply_inn.
In your example, the div with the class form-actions is actually the last child.
You can only use the last-child selector if it is the last child of it's parent container - although it was the last child with that class name it wasn't the last child of the container
https://developer.mozilla.org/en-US/docs/CSS/:last-child
Here is a fiddle showing your code with the last child style applied
http://jsfiddle.net/QSeU2/7/
target for border-top and remove the first-child's border-top
http://jsfiddle.net/btevfik/QSeU2/6/
last-child doesn't work.
Related: Using the last-child selector
Any reason you don't want to use
.location {border:none;}
?
I'm trying to style a sibling related to an input with the -webkit-autofill pseudoclass like this:
input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}
But it doesn't work. Is it posible to achieve what I'm trying? Or should I rely on javascript for this?
Updated with HTML:
<div>
<span class="add-on icon-user"></span
<input type="text" id="user_name" name="user[user_name]">
</div>
To clear up things, what I want to achieve is to set the same background color for the span element when the input is autofilled.
You can't style a preceding sibling with pure CSS. The selector ~ matches a sibling that comes after the first element.
Or as one could read it in the MDN docs:
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
https://developer.mozilla.org/en-US/docs/CSS/General_sibling_selectors
input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}
would match the span in:
<div>
<input type="text" id="user_name" name="user[user_name]">
<span class="add-on icon-user"></span>
</div>
I have a html table column defined like this:
<td>
<form:checkbox cssClass="check" path="somePath" id="somePath" onclick="someFn(this);" />
<form:label path="somePath" for="somePath"><spring:message code="label.someLabel" /></form:label>
<div>11</div>
</td>
So there is a checkbox, a label and a div element with text of '11'.
Now the 11 shows up below the checkbox. But i want it to show to the right of the label.
Why is this happening?
div is a block element, consider using span (or other inline element) or styling div as display:inline;
http://en.wikipedia.org/wiki/Span_and_div#Differences_and_default_behavior