This question already has answers here:
Select element based on multiple classes
(3 answers)
Closed 4 months ago.
i'm tring to make something looks good
i was tring to use css but i got a problem
only a inline style is working...
reply new {
display: inline-block;
height: 5vh;
}
reply new writer {
width: 20px;
}
reply new content {
width: 20px;
}
<input type="text" class="reply new writer form-control input-sm" style="width: 20px">
<input type="text" class="reply new content form-control input-sm">
it doesn't work.
but
<input type="text" class="reply new writer form-control input-sm" style="width: 20px">
<input type="text" class="reply new content form-control input-sm">
it works.
what should i do
reply new
This is a type selector, followed by a descendant combinator, followed by another type selector. It will match:
<reply><new></new></reply>
… which is not valid HTML.
To select an element based on a class you need to use a class selector, which starts with a ..
To select an element based on multiple features, you need to combine them directly without putting descendant combinators between them.
.reply.new {
...
}
You are missing a "." before you're class selectors.
When trying to target a "class" you need to use .ClassName
W3Schools has examples and a good interactive example too.
Also if you want to target two classes it's:
.ClassOne.ClassTwo
That will target:
<div class="ClassOne ClassTwo">Hello</div>
Related
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>
I am trying to style the .md-input-element on md-input which is added by default from angular-material.css which seems I cannot get to work. I cam trying to add the letter-spacing style but it only works as the current. style on the console. Is there any way to override this particular style for md-input-element in my own css file?
My html code is as below :
<!-- Input Name* -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
<div class="name-padding">
<md-input class="mdl-textfield--full-width" mandatory type="text" id="name" formControlName="name" placeholder="Name"
[(ngModel)]="outlet.name">
<md-hint *ngIf="formErrors.name">{{ formErrors.name }}</md-hint>
</md-input>
</div>
</div>
</div>
css :
.md-input-element {
letter-spacing: 0 !important;
}
If you set the style in the component that contains the mentioned html code, then it will not work because of the standard ViewEncapsulation. The default ist Emulated and will change your CSS-selector to something like the following during runtime:
.md-input-element[_ngcontent-xsa-40] {
{
letter-spacing: 1px;
}
This selector will not match with class="md-input-element" of the md-input because of the attached attribute.
Now you have three options
Use /deep/: You can rewrite your selector using deep. E.g. :host /deep/ .md-input-element to stop Angular2 adding the cryptic attribute to your selector.
Change ViewEncapsulation: You can change your ViewEncapsulation to None to stop Angular2 adding the cryptic attribute to your selector.
Global style: Add the style to a global style.css to get around the ViewEncapsulation
Look here for more information about styling your components https://angular.io/docs/ts/latest/guide/component-styles.html
try with below selector
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
letter-spacing:0!important;
border-color: orange;
}
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
I have this:
<div id="sidebar-a">
<form id="form">
<input class="button" type="submit">
</input>
</form>
</div>
And I need to select only the input (my page has same <form> in #footer, the only way to change property of this one is, like I tried to do, with #sidebar-a, but it doesn't work)
Given that you made no mention of JQuery, I'm assuming you're trying to select the input element via CSS.
#sidebar-a > form > input.button:first-child {
font-size: 2em;
}
An example is available at this JSFiddle
You should not have 2 form elements with same ID. However this will do it:
#sidebar-a > form > input.button:first-of-type { }
Is there something like != (not equal) in CSS?
e.g, I have the following code:
input {
...
...
}
but for some inputs I need to void this. I'd like to do that by adding the class "reset" to the input tag, e.g.
<input class="reset" ... />
and then simply skip this tag from CSS.
How I can do that?
The only way I can see would be to add some class to the input tag, and rewrite the CSS as follows:
input.mod {
...
...
}
In CSS3, you can use the :not() filter, but not all browsers fully support CSS3 yet, so be sure you know what you're doing which is now
supported by all major browsers (and has been for quite some time; this is an old answer...).
Example:
<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />
and the CSS
input:not(.avoidme) { background-color: green; }
Note: this workaround shouldn't be necessary any more; I'm leaving it here for context.
If you don't want to use CSS3, you can set the style on all elements, and then reset it with a class.
input { background-color: green; }
input.avoidme { background-color: white; }
You can also do that by 'reverting' the changes on the reset class only in CSS.
INPUT {
padding: 0px;
}
INPUT.reset {
padding: 4px;
}
You could also approach this by targeting an attribute like this:
input:not([type=checkbox]){
width:100%;
}
In this case all inputs that are not 'checkbox' type will have a width of 100%.
CSS3 has :not(), but it's not implemented in all browsers yet. It is implemented in the IE9 Platform Preview, however.
input:not(.reset) { }
http://www.w3.org/TR/css3-selectors/#negation
In the meantime, you'll have to stick to the old-fashioned methods.
Interesting just tried this for selecting DOM element using JQuery and it works! :)
$("input[class!='bad_class']");
This page has 168 divs which does not have class 'comment-copy'
$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
instead of class="reset" you could reverse the logic by having class="valid"
You can add this by default and remove the class to reset the style.
So from your example and Tomas'
input.valid {
...
...
}
and
<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>