I'm trying to add an asterisk symbol before the label so that it looks like *Country based on the parent node with "required" class
<span id="Country" class="none required">
<label for="id_Country">Country</label>
<select name="Country[]" id="id_Country">
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
</select>
</span>
I'm trying something like:
.required:first-child:before {
content : "* ";
color : red;
}
If you are trying to apply the * before the label, then you need to use the CSS selector as follows:
.required > label:first-child:before {
content : "* ";
color : red;
}
The :first-child selector applies to the actual element it is modifying. In other words, it needs to be read as "apply this css before the label that is the first-child to it's parent. This parent must also have a class of required" not "apply this css before the first-child of node with required as class" as is done in your original example.
You're using the selector incorrectly, first-child definition:
The :first-child pseudo class means "if this element is the first child of its parent".
Which in your case translates to "if .required is the first child of its parent". I don't think that's what you're intending.
How about:
$('label', '.required').prepend('*');
Cheers
Related
I have a <select> box in a <form>, and when its value is other, I want elements that have the class .applicableSupportCase to be hidden. I am trying to do this with just CSS. What am I doing wrong?
CSS
.applicableSupportCase {
transition: transform 0.3s ease, opacity 0.3s ease;
}
#typeBox[value="other"] ~ .applicableSupportCase{
opacity: 0;
transform: scaleY(0);
}
HTML
<select class="contactField" id="typeBox">
<option value="supportCase" selected="selected">Support case</option>
<option value="other">Other</option>
</select>
<label class="applicableSupportCase">Device:</label>
There are more elements with the applicableSupportCase class, but you get the point.
Actually, the css attribute selector don't look at value in the way that you are thinking...
Though Javascript sees the value property as the selected option's value, CSS sees only the markup, and an select[value='something'] attribute selector would actually look for this:
<select value='something'>
Not for the <option> selected.
Through css-only you will not be able to change another element using the selected option because the <option> is nested to the <select> tag, and there's no parent navigation selection on css.
EDIT
You can, however, mock it up with javascript, and leave your css selector as it is. Just trigger the select's onchange event to set an attribute called value to the DOM select element:
See Working Fiddle Example
document.getElementById('typeBox').onchange = function() {
this.setAttribute('value', this.value);
};
This can't be done using a <select> item, however because of the pseudo class :checked states of checkboxes and radio buttons, you can accomplish what you wanted using those instead:
HTML
<input type="radio" id="supportCase" name="radios">
<label for="supportCase">Support Case</label>
<input type="radio" id="other" name="radios">
<label for="other">Other</label>
<br />
<label class="applicableSupportCase">Device:</label>
CSS
input[id=other]:checked ~ .applicableSupportCase {
visibility:hidden;
}
I used visibility, but you can change the attribute to whatever you want.
If you want an ease in and out, then create the same statement using the :not(:checked) pseudo class:
input[id=other]:not(:checked) ~ .applicableSupportCase {
//whatever ease(out) you want here
}
JSFiddle: http://jsfiddle.net/ja2ud1Lf/
I would use personally create another class for hidden objects (eg 'hiddenClass'), and use jquery similar to the following:
$( "#typeBox" ).change(function(){
if($("#typeBox").val()=="other")
{
$(".applicableSupportCase").each(function(){
$(this).addClass("hiddenClass");
});
}
});
I have a <select> box in a <form>, and when its value is other, I want elements that have the class .applicableSupportCase to be hidden. I am trying to do this with just CSS. What am I doing wrong?
CSS
.applicableSupportCase {
transition: transform 0.3s ease, opacity 0.3s ease;
}
#typeBox[value="other"] ~ .applicableSupportCase{
opacity: 0;
transform: scaleY(0);
}
HTML
<select class="contactField" id="typeBox">
<option value="supportCase" selected="selected">Support case</option>
<option value="other">Other</option>
</select>
<label class="applicableSupportCase">Device:</label>
There are more elements with the applicableSupportCase class, but you get the point.
Actually, the css attribute selector don't look at value in the way that you are thinking...
Though Javascript sees the value property as the selected option's value, CSS sees only the markup, and an select[value='something'] attribute selector would actually look for this:
<select value='something'>
Not for the <option> selected.
Through css-only you will not be able to change another element using the selected option because the <option> is nested to the <select> tag, and there's no parent navigation selection on css.
EDIT
You can, however, mock it up with javascript, and leave your css selector as it is. Just trigger the select's onchange event to set an attribute called value to the DOM select element:
See Working Fiddle Example
document.getElementById('typeBox').onchange = function() {
this.setAttribute('value', this.value);
};
This can't be done using a <select> item, however because of the pseudo class :checked states of checkboxes and radio buttons, you can accomplish what you wanted using those instead:
HTML
<input type="radio" id="supportCase" name="radios">
<label for="supportCase">Support Case</label>
<input type="radio" id="other" name="radios">
<label for="other">Other</label>
<br />
<label class="applicableSupportCase">Device:</label>
CSS
input[id=other]:checked ~ .applicableSupportCase {
visibility:hidden;
}
I used visibility, but you can change the attribute to whatever you want.
If you want an ease in and out, then create the same statement using the :not(:checked) pseudo class:
input[id=other]:not(:checked) ~ .applicableSupportCase {
//whatever ease(out) you want here
}
JSFiddle: http://jsfiddle.net/ja2ud1Lf/
I would use personally create another class for hidden objects (eg 'hiddenClass'), and use jquery similar to the following:
$( "#typeBox" ).change(function(){
if($("#typeBox").val()=="other")
{
$(".applicableSupportCase").each(function(){
$(this).addClass("hiddenClass");
});
}
});
Is it possible to use a CSS selector to target an input that has a specific value?
Example: How can I target the input below based on the value="United States"
<input type="text" value="United States" />
Dynamic Values (oh no! D;)
As npup explains in his answer, a simple css rule will only target the attribute value which means that this doesn't cover the actual value of the html node.
JAVASCRIPT TO THE RESCUE!
Ugly workaround: http://jsfiddle.net/QmvHL/
Original Answer
Yes it's very possible, using css attribute selectors you can reference input's by their value in this sort of fashion:
input[value="United States"] { color: #F90; }
• jsFiddle example
from the reference
[att] Match when the element sets the "att" attribute, whatever the
value of the attribute.
[att=val] Match when the element's "att"
attribute value is exactly "val".
[att~=val] Represents an element
with the att attribute whose value is a white space-separated list of
words, one of which is exactly "val". If "val" contains white space,
it will never represent anything (since the words are separated by
spaces). If "val" is the empty string, it will never represent
anything either.
[att|=val] Represents an element with the att
attribute, its value either being exactly "val" or beginning with
"val" immediately followed by "-" (U+002D). This is primarily intended
to allow language subcode matches (e.g., the hreflang attribute on the
a element in HTML) as described in BCP 47 ([BCP47]) or its successor.
For lang (or xml:lang) language subcode matching, please see the :lang
pseudo-class.
css attribute selectors reference
It is possible, if you're using a browser which supports the CSS :valid pseudo-class and the pattern validation attribute on inputs -- which includes most modern browsers except IE9.
For instance, to change the text of an input from black to green when the correct answer is entered:
input {
color: black;
}
input:valid {
color: green;
}
<p>Which country has fifty states?</p>
<input type="text" pattern="^United States$">
Yes, but note: since the attribute selector (of course) targets the element's attribute, not the DOM node's value property (elem.value), it will not update while the form field is being updated.
Otherwise (with some trickery) I think it could have been used to make a CSS-only substitute for the "placeholder" attribute/functionality. Maybe that's what the OP was after? :)
As mentioned before, you need more than a css selector because it doesn't access the stored value of the node, so javascript is definitely needed. Heres another possible solution:
<style>
input:not([value=""]){
border:2px solid red;
}
</style>
<input type="text" onkeyup="this.setAttribute('value', this.value);"/>
Sure, try:
input[value="United States"]{ color: red; }
jsFiddle example.
You can use Css3 attribute selector or attribute value selector.
/This will make all input whose value is defined to red/
input[value]{
color:red;
}
/This will make conditional selection depending on input value/
input[value="United States"]{
color:red;
}
There are other attribute selector like attribute contains value selector,
input[value="United S"]{
color: red;
}
This will still make any input with United state as red text.
Than we attribute value starts with selector
input[value^='united']{
color: red;
}
Any input text starts with 'united' will have font color red
And the last one is attribute value ends with selector
input[value$='States']{
color:red;
}
Any input value ends with 'States' will have font color red
Refreshing attribute on events is a better approach than scanning value every tenth of a second...
http://jsfiddle.net/yqdcsqzz/3/
inputElement.onchange = function()
{
this.setAttribute('value', this.value);
};
inputElement.onkeyup = function()
{
this.setAttribute('value', this.value);
};
In Chrome 72 (2019-02-09) I've discovered that the :in-range attribute is applied to empty date inputs, for some reason!
So this works for me: (I added the :not([max]):not([min]) selectors to avoid breaking date inputs that do have a range applied to them:
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}
Screenshot:
Here's a runnable sample:
window.addEventListener( 'DOMContentLoaded', onLoad );
function onLoad() {
document.getElementById( 'date4' ).value = "2019-02-09";
document.getElementById( 'date5' ).value = null;
}
label {
display: block;
margin: 1em;
}
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}
<label>
<input type="date" id="date1" />
Without HTML value=""
</label>
<label>
<input type="date" id="date2" value="2019-02-09" />
With HTML value=""
</label>
<label>
<input type="date" id="date3" />
Without HTML value="" but modified by user
</label>
<label>
<input type="date" id="date4" />
Without HTML value="" but set by script
</label>
<label>
<input type="date" id="date5" value="2019-02-09" />
With HTML value="" but cleared by script
</label>
Following the currently top voted answer, I've found using a dataset / data attribute works well.
//Javascript
const input1 = document.querySelector("#input1");
input1.value = "0.00";
input1.dataset.value = input1.value;
//dataset.value will set "data-value" on the input1 HTML element
//and will be used by CSS targetting the dataset attribute
document.querySelectorAll("input").forEach((input) => {
input.addEventListener("input", function() {
this.dataset.value = this.value;
console.log(this);
})
})
/*CSS*/
input[data-value="0.00"] {
color: red;
}
<!--HTML-->
<div>
<p>Input1 is programmatically set by JavaScript:</p>
<label for="input1">Input 1:</label>
<input id="input1" value="undefined" data-value="undefined">
</div>
<br>
<div>
<p>Try typing 0.00 inside input2:</p>
<label for="input2">Input 2:</label>
<input id="input2" value="undefined" data-value="undefined">
</div>
Select one part of text in div class:
<div class="enabled_disabled disabled">
<div class="enabled_disabled">
<div class="enabled_disabled">
<div class="enabled_disabled">
<div class="enabled_disabled disabled">
I have those div tags, is there any xpath syntax or fizzler CSS selectors syntax to select just those div tags which have enabled_disabled only (the 3 in the middle)? not those with enabled_disabled disabled
var html = new HtmlDocument();
html.LoadHtml(getitems);
var doc = html.DocumentNode;
var items = (from r in doc.QuerySelectorAll("div.enabled_disabled:not(.disabled)")
let Name = r.InnerHtml//QuerySelector("div.enabled_disabled div.title_bar div.rate_title span.name").InnerText.CleanInnerText()
select new {
CName = Name
}).ToArray();
Fizzler
To select an element with only the class enabled_disabled, you would use:
[class='enabled_disabled']
Using a :not selector is not available in vanilla Fizzler, but can be used if you grab FizzlerEx
XPath
To select an element with only the class enabled_disabled, you would use:
div[#class='enabled_disabled']
In plain old CSS
If the div's assigned classes starts with enabled_disabled:
div[class^=enabled_disabled ]
If the div's assigned classes contains enabled_disabled
div[class*=enabled_disabled ]
If the div only has the class enabled_disabled
div[class=enabled_disabled ]
If the div has the class enabled_disabled and not the class disabled
div.enabled_disabled:not(.disabled)
Given the HTML you list in your question, either of the last two will work for you.
more on attribute selectors from MDN, and, more on :not()
You could use this selector that will match the class and will avoid the other.
$(".enabled_disabled:not('.disabled')");
and you can take out contents out of $()
and it is valid css selector
.enabled_disabled:not(.disabled)
Use not() selector in css.The :not pseudo-class represents an element that is not represented by its argument.
.enabled_disabled:not(.disabled){
}
FIDDLE
More about
SEE THE LINK
i need to aply a css for a input if his parent is a special class (closeorder)
In this html:
<autocomplete id="items" placeholder="Buscar trabajos" pause="400" selectedobject="selectedObject"
url="http://localhost:801/categories/query/New Company/"
titlefield="type,code,name,price" descriptionfield="Categoria, Codigo, Nombre, Precio"
inputclass="form-control form-control-small selector closeoder"
class="ng-isolate-scope">
<div class="input-group autocomplete-holder">
<form ng-submit="submit()" class="ng-pristine ng-valid">
<button data-toggle="tooltip" title="Añadir seleccion" class="btn btn-tr btn-link animated pulse- btn" style="color:#81BB31; font-size:20px;">
<span class="input-group-addon glyphicon glyphicon-plus"></span>
</button>
</form>
<input id="search_value" ng-model="searchStr" type="text"
placeholder="Buscar trabajos" class="selector ng-pristine ng-valid">
</div>
</autocomplete>
The autocomplete element has inputclass closeorder, how can i set css to the input child?
I tried with this:
autocomplete.closeorder > input {
width: 88% !important;
}
but dont work..
For a complete list of CSS selectors take a look here.
Basically, you seem to need these two selectors:
E[foo~="bar"]
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
E F
an F element descendant of an E element
The CSS rule should look like this:
autocomplete[inputclass~="closeoder"] input {
...
}
This reads:
Select any input element that is a descendant of an autocomplete element whose "inputclass" attribute value is a list of whitespace-separated values, one of which is exactly equal to "closeorder".
See, also, this short demo.
(Using !important is rarely a good idea. Learn about CSS specificity and try to avoid !imporant as much as possible.)
A combination of a couple of errors. First remove inputclass and use class
Fix the typo to closeorder in the HTML
and finally use this CSS
.closeorder input[type="text"]{
width: 88%;
}
The !important is not necessary and you should used the !important hack as least as possible.
See DEMO