Given I have the following tags:
<div id="div-one">
<div class="div-two">some </div>
<input type="hidden" value=""/>
<div class="div-two">some </div>
<input type="hidden" value=""/>
<div class="div-two">some </div>
<input type="hidden" value=""/>
</div>
When I try to apply a style to the last "div-two" element using this css syntax:
#div-one div.div-two:last-child { border-bottom:solid 1px #999; }
It doesn't work unless I remove the hidden fields. Any suggestions as to why?
Here's a link to the jsfiddle: http://jsfiddle.net/67qYJ/1/
Using Google Chrome v12.0.742.100
It is NOT an option to place the hidden tags elsewhere
Your selector doesn't work for your current markup because the last child is an input, not a div.div-two.
Is div#div-one only going to contain those two kinds of elements? If so, you can use :last-of-type instead, which picks the last div (though regardless of its class):
#div-one div:last-of-type { border-bottom:solid 1px #999; }
However if your inner div elements have other classes besides .div-two, it will be pretty difficult to choose the last .div-two element. Your given code makes it easy because div and input are distinct element types and only the .div-two class is present.
If you can't use last-of-type like #BoltClock suggested you could just add a second class to the last .div-two in the group.
http://jsfiddle.net/watss/
<div class="div-two last">some </div>
and
#div-one > .div-two.last { border-bottom:1px solid; background:yellow; }
or better yet
#div-one > .last { border-bottom:1px solid; background:yellow; }
Related
Ciao, I have this element here:
<div class="uk-form-row">
<div class="md-input-wrapper md-input-filled md-input-focus">
<label>Label</label>
<input type="text" class="md-input">
<span class="md-input-bar"></span>
</div>
</div>
This is from a material design theme (Altair Admin v2) so the element once the page is loaded does this:
As you can see the label is moving around (but maybe is not a big deal).
With other elements, if they are empty (invalid) I can underline them or change their color using css:
input:invalid::-webkit-input-placeholder{
color: #e53935 !important;
}
But being this a label BEFORE the input I don't know how I can select it with CSS. How do I turn the LABEL into a different color if the input is invalid?
There is a simpler way to get this done. The :valid and :invalid pseudo-classes will automatically bubble up to a parent <fieldset>. Here is the reference.
You can take advantage of this fact to style your label like so:
<fieldset>
<label>Label</label>
<input type="text" />
</fieldset>
Then in your CSS
fieldset:invalid > label:first-of-type {
color: #e53935 !important;
}
So if your input is :invalid it will invalidate your fieldset, which you can then reference to style your label.
Look at CSS code (simplified to illustrate my point):
.md-input-wrapper {
position: relative;
}
.md-input-wrapper > label {
position: absolute;
top: 16px;
left: 4px;
right: 0;
}
Label is positioned absolutely relative to wrapper, so you can put label element after input element in HTML:
<div class="md-input-wrapper">
<input type="text" class="md-input">
<span class="md-input-bar"></span>
<label>Label</label>
</div>
After that, you can use General sibling combinator to select label of invalid input:
input:invalid ~ label {
color: red;
}
My Code Looks something like this:
input{
...
}
label{
...
}
<div class="textfield 1">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield 2">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield 3">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
now i want to apply the css only on one of the textfields and because the code is way to long to ad a ".textfield1" to every css element i want to ask if i can create a "parent class element" like:
.textfield1{
input{
...
}
label{
...
}
}
.textfield2{
input{
...
}
label{
...
}
}
It's like putting the styled elements in a Folder.
Is there a way to do that?
Thanks a lot in advance!
You can use:
.textfield1 input {
...
}
.textfield1 label {
...
}
Check this link for more CSS selectors combinations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
As Turnip mentions in comments, you cannot have spaces in classnames. So instead of having class names such as textfield 1, you could have them like textfield1 - or something else. For the time being, I am using textfield1 to demonstrate the solution.
Now, you could use the descendant selector .textfield1 input (notice the space between the class name and tag name) or the child selector .textfield2 > input (notice the arrow > between the class name and tag name) to specify that given CSS rule must apply only to the descendants or children of given class.
input{
border: 2px solid blue;
}
label{
color: blue;
}
.textfield1 input {
border: 2px solid red;
}
.textfield2 > input {
border: 2px solid yellow;
}
<div class="textfield1">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield2">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield3">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
If you use preprocessor like Sass or Less, you can nasted css like your example. It's not possible in the classical way.
In css:
.textfield2 input{
...
}
.textfield1 input{
...
}
.textfield1 label, //<- if the label style of textfield1 and textefield2 are same
.textfield2 label{
...
}
Be careful, in your HTML you have a space between textfield and the number <div class="textfield 3">. That's mean your div has the CSS class textfield and the CSS class 3.
If you just want one class remove the space and the code above works.
If you keep the space, just modify .textfield2 to .textfield.2 with a dot between textfield and the number (to indicate that the style it's for the class textfield with the class 2)
I'm trying to style the first legend element within nested fieldsets, but none of the CSS selectors I used achieve what I'm after.
http://codepen.io/anon/pen/epodxd
I basically want to style the first legend element without using any additional CSS class if possible.
<fieldset class="nested-parent">
<legend>Parent</legend>
<input type="text" size="10" />
<fieldset>
<legend>Child</legend>
<input type="text" size="20" />
</fieldset>
</fieldset>
.nested-parent legend:first-child {
color: red;
}
Based on the HTML you provided, you could use the child selector, > in order to select the first legend element that is a direct child of the .nested-parent element:
.nested-parent > legend:first-child {
color: #f00;
}
I would suggest using the :first-of-type pseudo class instead though. It will be more accurate when dealing with the element's types.
Example Here
.nested-parent > legend:first-of-type {
color: #f00;
}
According to the W3 CSS spec, something like: input[type~="text password"] should select input fields whose type is set to either "text" or "password", but it doesn't work! Did I misinterpret this line?
E[foo~="warning"] Matches any E element whose "foo" attribute value is
a list of space-separated values, one of which is exactly equal to
"warning".
CSS spec source, it's the fourth from the bottom in the table.
Yep, you've got it round the wrong way. The selector is to search within a space seperated list.. i.e.
<element attribute="text password" />
you could find using:
element[attribute~="text"]
The benefit of this is that it shouldn't match:
<element attribute="textual password" />
To achieve what you're actually trying to do is a bit more verbose:
input[type="text"], input[type="password"]
Just follow this:
html:
<div class="contact-form">
<label for="">Name</label>
<input type="text">
<label for="">Email</label>
<input type="email">
<label for="">Subject</label>
<input type="text">
<label for="">Message</label>
<textarea></textarea>
<input type="submit" value="Send">
</div>
css:
.contact-form input[type="text"], input[type="email"]{
width:100%;
box-sizing:border-box;
border:1px solid black;
padding:5px;
}
.contact-form input[type="submit"]{
display:block;
color:black;
background-color:white;
border:1px solid black;
border-radius:10px;
margin-top:10px;
padding:10px;
cursor:pointer;
margin:auto;
margin-top:20px;
}
I hope you understand it.
You are reading it wrong. E[foo~="warning"] will select any element that has warning it a space separated list. Like this: <el foo="test warning etc" />
I tried input{property: ....} and it worked.
For example input{border: 3px solid red;}
I'm working on an Asp.Net MVC 3 project and have run into a brick wall on why this doesn't work like I think it should.
My markup is:
<fieldset>
<input type="hidden" value="2">
<div class="editor-label">
<label for="Name"> Name</label>
</div>
...
</fieldset>
My css is:
.display-label, .editor-label
{
margin: 0.8em 0 0 0;
font-weight: bold;
display: inline;
}
fieldset > div:first-child
{
margin: 0;
}
All I want to do is make the first div in the fieldset have a margin of 0. I thought that the selector fieldset > div:first-child would apply the style to "the first child of a fieldset, whose type is a div", but apparently something is eluding me.
I've tried this in IE9/FF/Chrome so it's not an old browser messing with my selectors.
Thanks.
fieldset > div:first-child means "select the first child element of a fieldset if it's a div".
It does not mean "select the first div in the fieldset".
The first child in this case is <input type="hidden" value="2">.
To select that div without changing the HTML, you need to use fieldset > div:first-of-type.
Unfortunately, while :first-child is widely supported, :first-of-type only works in IE9+ and other modern browsers.
So, in this case, the best fix is to continue using fieldset > div:first-child, and simply move <input type="hidden" value="2"> so that's it's not the first child.