<form class="fin-search-input" method="post" action="../FinServlet">
<li><BR><input type="text" name="ticker" placeholder="Ticker*"></li>
<li><input type="text" name="fromDate" placeholder="From" id="fromDate"></li>
<li><input type="text" name="toDate" placeholder="To" id="toDate"></li>
<li><input type="submit" value="search" class="submitButton"></li>
</form>
How can I select all input elements except last?
This is what I tried :
.fin-search-input input:not(:last-of-type){
height:13px !important;
width:90%;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow:inset 2px 2px 2px #888;
box-shadow:inset 2px 2px 2px #888;
}
This css is not applied to any input element.
Your selector seems to be wrong, in the case of your posted HTML every input is the :last-of-type within its parent element. You need to select the input contained within the :last-of-type li element instead (I assume):
.fin-search-input li:not(:last-of-type) input {
/* css */
}
JS Fiddle demo.
Did you try this?
.fclass input:not(:last-of-type) { color:red }
Actually, your current code works.
:last-child can be used this way with :not
FIDDLE
:last-child selector should work. I have checked it. Use last-of-type instead. The :last-of-type selector matches every element that is the last child, of a particular type, of its parent.
Check this FIDDLE
Related
What is the difference checked and default pseudo-class cause they look similar? I'm confused. Please someone explain between two property diff.
* {
border: none;
}
:checked {
outline: 3px solid orange;
}
:default {
outline: 3px solid blue;
}
<input type="checkbox" checked/>
<!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->
:default is not necessary to use. It defines a default value. :checked only applies when the element is checked. The issue is, that you use :default last which also overwrites the previous :checked selector. If you swap them, it will work:
* {
border: none;
}
:default {
outline: 3px solid blue;
}
:checked {
outline: 3px solid orange;
}
<input type="checkbox" checked/>
<!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->
I have a problem in selecting the particular input file element in html using selector.
How to style the particular input type element without affect the others
You can style a particular type of input element in below was
1) Apply a class or id to the input element and write styles for that class or id
HTML
<input class="custom-file" type="file"/>
CSS:
.custom-file {
border: 1px solid red;
}
2)Or You can target the input type itself in genral like the below snippet.
HTML
<input type="file"/>
CSS:
input[type="file"] {
border: 1px solid red;
}
This will apply the css only for the input type file, and not for other input types such as text etc. This will add border red to all the input tags in the page with type file.
3) Or if more than one input file is present try targetting using the nth-child selector in css
**HTML**
<input class="custom-file" type="file"/>
<input class="custom-file" type="file"/>
<input class="custom-file" type="file"/>
**CSS:**
input[type="file"]:nth-child(2) {
border: 1px solid red;
}
This will add border only to the second instance of the input type file.
How do I get a CSS selector to skip over <dd> and apply to all the <dt> only? I am trying to only apply border-bottom to the first <dt>.
I tried: dl > dt:not(:last-child), but that didn't work either.
CSS:
dt:not(:last-child) {
border-bottom: 5px solid #dddddd;
}
HTML:
<dl>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
<dt>Dates of Operation</dt>
<dd style="display: none;"></dd>
</dl>
You are looking for the :first-of-type CSS pseudo-class:
dl > dt:first-of-type {
border-bottom: 5px solid #dddddd;
}
See demo fiddle here.
As always, make sure you check for target browser support before using it. If you have a large audience, the standard way of achieving what you want is using a regular class.
Use :first-child selector
dl > dt:first-child {
border-bottom: 5px solid #dddddd;
}
Fiddle: http://jsfiddle.net/2SZ9f/
you can use first-child
It works exacly the same as last child but it's the first child. should work fine. Here is a codepen :
http://codepen.io/anon/pen/eFkbq
It would depends on which is the special element. If the first is the only one with border then you should use
dt:first-child{
border-bottom: 5px solid #dddddd;
}
But if you want to have border on every child except the last one, then try this:
dt {
border-bottom: 5px solid #dddddd;
}
dt:last-child {
border-bottom: none;
}
This will override the border bottom style added to dt elements.
If you only have 2 elements then you can add id, class or first-child. If the last child is the special one then add the css for it and you may have many other dt elements.
I am using Bootstrap 3 and am trying to make it so that the entire form (input field AND button), change the border color on focus. Meaning, if I click in the input field, the entire border of the button should also change colors, not just the border of the input field. Does that make sense?
Here is the code:
<form class="form-inline" role="form">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</form>
and the CSS:
.form-control:focus {
border-color:#1ABC9C;
box-shadow:none;
}
The problem with that is ...it just changes colors of the input field, not the button, unless someone clicks the button. How do I make it change colors for both at the same time?
Fiddle: http://jsfiddle.net/CbGpP/
Use the adjacent sibling selector so your CSS looks like this:
.form-control:focus, .form-control:focus + span .btn{
border-color:#1ABC9C;
box-shadow:none;
}
It's supported in all major browsers including IE7+.
Here it is working: http://jsfiddle.net/CbGpP/2/
You have to be a little hacky if you're not using JS, so this won't be flexible if you change your layout, use with caution.
.form-control:focus,
.form-control:focus + .input-group-btn > .btn {
border-color:#1ABC9C;
box-shadow:none;
/* outline: 5px solid red; */
}
You could use ~ in css to hover over one element and select another. You could also remove the left and right border of either element so they look like one.
DEMO http://jsfiddle.net/kevinPHPkevin/CbGpP/4/
.form-control:focus ~ span .btn{
border-color:#1ABC9C;
box-shadow:none;
border-left: #ccc;
}
Is it possible to have the background-color of a form's fieldset change when the cursor is inside any of that fieldset's text fields?
I assumed this might work, but it doesn't:
fieldset {background: #ffe;}
input[type=text]:focus+fieldset {background: #ff0;}
You can't style a fieldset based on the focus state of one of its children inputs.
However, you can simulate the effect by adding an empty div as the last child of the fieldset, and styling it. This div's styles can then be changed using the general sibling selector on the focused input:
fieldset {
border: none;
position: relative;
margin-bottom: 0.5em;
}
legend {
position: relative;
background: white;
}
input:focus {
background: lightyellow;
}
input:focus ~ div {
border: 2px solid black;
background: #def;
}
fieldset > div {
height: calc(100% - 0.5em);
width: 100%;
position: absolute;
top: 0.5em;
left: 0;
border: 2px solid lightgray;
z-index: -1;
}
<fieldset>
<legend>Fieldset 1</legend>
<input name="text1" type="text" />
<input name="text2" type="text" />
<div></div>
</fieldset>
<fieldset>
<legend>Fieldset 2</legend>
<input name="text3" type="text" />
<input name="text4" type="text" />
<div></div>
</fieldset>
This is now possible with :focus-within
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN
fieldset {
background: green;
margin: 1em;
}
fieldset:focus-within {
background: red;
}
<fieldset>
<input>
</fieldset>
I’m afraid it’s not possible with CSS, since CSS doesn't have a selector that would select on the basis of an element’s children. The selector input[type=text]:focus+fieldset in your attempt matches a fieldset element that immediately follows a focused text input box—something quite different from what you want.
It is however possible and fairly easy do deal with this using JavaScript. You would just need onfocus and onblur event handlers on the fields inside the fieldset, and these handlers could be the same functions for all of them; they would just change the style.background property of the fieldset element,
If you are not using the fieldset for accessibility reasons, then just do something like this:
http://www.pmob.co.uk/temp/categorybox.htm
If you need it for both borders AND accessibility, consider wrapping the fieldset in a div and then styling that containing div instead of the fieldset.
Hope this helps!
Matt
If you are using Jquery, and you are not nesting your fieldsets, you can do a simple bind which attaches itself to all your page controls within a fieldsets, and whenever you focus/unfocus on any of these controls, a class is added/removed from the fieldset containing the control.
Here's a sample:
$('input, label, select, option, button', 'fieldset').each(function (index, item) {
$(this).focus(function () { $(this).closest('fieldset').addClass('fieldsetFocus'); });
$(this).blur(function () { $(this).closest('fieldset').removeClass('fieldsetFocus'); });
});