All I want to do is select multiple elements and with a certain class so that I don't have redundancy in my CSS file
#resp36, #physicalResp36, #nonResp36, #physicalNonResp36 .fieldStateError {
border: 1px solid #d6dbdc!important;
}
But the last element does not get the stlye while the others do. And I am not certain why that is happening.
Thank you in advance!
Spaces in a selector cause looking for child elements. You can select an element with multiple conditions by simply putting all selectors right behind each other:
#resp36.fieldStateError,
#physicalResp36.fieldStateError,
#nonResp36.fieldStateError,
#physicalNonResp36.fieldStateError {
border: 1px solid #d6dbdc !important;
}
Note that this is pretty much one of the most redundant things you could do in CSS, as classes are meant to unify such declarations into a single selector. Unless you were slinging the .fieldStateError class around, this should have the same effect as the code above:
.fieldStateError {
border: 1px solid #d6dbdc !important;
}
If all your elements have that class, you only need to use the class selector.
If you wanted to select the last id that also has that class, remove the space between class and id, because you are asking for a son of that id with that class.
you do not have a comma before ".fieldStateError".
Example:
#resp36, #physicalResp36, #nonResp36, #physicalNonResp36, .fieldStateError {
border: 1px solid #d6dbdc!important;
}
or remove the gap (<div id="#physicalNonResp36" class="fieldStateError">)
#resp36, #physicalResp36, #nonResp36, #physicalNonResp36.fieldStateError {
border: 1px solid #d6dbdc!important;
}
Related
I have a CSS stylesheet as follows:
.commandsTable {
color: whitesmoke;
background-color: black;
margin-left: auto;
margin-right: auto;
}
.commandsTable td {
background-color: #039be5;
}
.commandsTable tr:hover {
background-color: black;
}
As one can see, '.commands table' is repeated twice to style the td and tr elements respecitvely.
So...
Is there a way of nesting dot (.) operators in CSS in order to prevent repetitive code entry?
You can do that only with a preprocessor like sass
In pure css you can not nest elements
Here's a link that would perfectly suit your requirement:http://tabatkins.github.io/specs/css-nesting/
While you can go for SASS, there is another option which is cssnext and you should definitely check it out.
Here's a link for it:http://cssnext.io/features/
With jQuery one can rescind an earlier CSS setting by passing an empty string as the "setting."
E.g. After something like:
$('#foo').css('display', 'none');
...the expression:
$('#foo').css('display', '');
will essentially cancel the earlier setting.
Is there an analogous way to cancel an earlier setting in CSS?
For example, suppose I set some CSS property for an element X, how can I specify the unsetting of this same property in an X:hover directive?
Set the property to a default value (which may be "inherit"). This is probably more looking up what default values you're using, and organization, than you're asking for.
X { outline: 1px solid red; }
X:hover { outline: none; }
/* this is different than not setting { outline: 1px solid red; } on X:hover! */
Or you can not select X:hover when setting it in the first place.
X:not(:hover) { outline: 1px solid red; }
Is there any way, of having a if like syntax, where I can check (for an example) there are more than input[type="text"]
Something like:
.my-element >= 1 {
border: 1px solid red; // Each .my-element will have a red border
}
.my-lement == 1 {
border: 1px solid green; // The only .my-element will have a green border
}
In javascript I would do something like:
if ($('input[type="text"]').length >= 1)
I mentioned LESS in the title, because I'm writing my css code in a LESS syntax
You can, in some cases, approximate this (albeit it requires an up-to-date browser, compliant with CSS3):
input {
border-color: #f00;
}
input:only-of-type {
border-color: #0f0;
}
JS Fiddle demo.
The above works on the assumption that you're trying to style an input element which is the only input element (or 'element of that type') as a child of its parent (it has no siblings of the same input element-type).
If, however, you're trying to style an element differently according to whether it has any sibling elements, you can use:
input {
border-color: #f00;
}
input:only-child {
border-color: #0f0;
}
JS Fiddle demo.
References:
:only-of-type (Mozilla Developer Network).
:only-of-type (W3C.org).
NO, in CSS there is no if else . Use JavaScript for changing your css dynamically.
the if statement is not present in LESS as well. But this language supports guard expression which may help in mimicking some if statements.
Check this tutorial
I am a newbie to CSS.Look at the pic:
http://i.stack.imgur.com/Y9X6K.jpg
Why img{border:2px,solid,red;} on the right is line-through,and in the browser the image hasn't border.
Anybody can tell me the reason?
Remove the commas because, your css statement is incorrect, hence the warning in the inspector:
img{border:2px solid red;}
A strike through a css rule in a developer tool such as in chrome means the rule is not being applied. In your case this is because your css is invalid there shouldn't be commas i.e
img { border:2px,solid,red; } /* invalid css */
img { border: solid 1px red; } /* valid css */
this expands to all shorthand css rules i.e
p { margin: 0 10px 0 10px; }
It can also mean it is being overridden somewhere else you can use !important at the end of a declaration to force the style i.e
img { background: red !important; }
Just remove those commas and make your css like this
img {
border:2px solid red;
}
multiple commas are used for define multi classes css.For more information check this link
I have some HTML that would have elements with multiple classes, and I need to assign them within one rule, so that the same classes could be different within different containers. Say I have this in my CSS:
.border-blue {
border: 1px solid blue;
}
.background {
background: url(bg.gif);
}
Then I have this in my HTML:
<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>
Can I target these within a single rule? Like this, for example, which I know doesn't work:
.border-blue, .background {
border: 1px solid blue;
background: url(bg.gif);
}
.border-blue.background { ... } is for when both classes are used together.
.border-blue, .background { ... } is for either class.
.border-blue .background { ... } is for where '.background' is the child of '.border-blue'.
See Chris' answer for a more thorough explanation. Also see W3 Docs on CSS Combinators
Just in case someone stumbles upon this like I did and doesn't realise, the two variations above are for different use cases.
The following:
.blue-border, .background {
border: 1px solid #00f;
background: #fff;
}
is for when you want to add styles to elements that have either the blue-border or background class, for example:
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
would all get a blue border and white background applied to them.
However, the accepted answer is different.
.blue-border.background {
border: 1px solid #00f;
background: #fff;
}
This applies the styles to elements that have both classes so in this example only the <div> with both classes should get the styles applied (in browsers that interpret the CSS properly):
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
So basically think of it like this, comma separating applies to elements with one class OR another class and dot separating applies to elements with one class AND another class.