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
Related
I am trying to understand what this SASS code will generate:
&--active, &:not(&--disabled):not(&--inactive):hover, &:not(&--disabled):not(&--inactive):focus {
background-color: white;
color: grey;
}
I am wondering about this part:
&:not(&--disabled):not(&--inactive):hover
The first part of the expression is clear to me &:not(&--disabled).
This will exclude the class &--disabled when applying the styles written below. But what does it mean the scss next to it - :not(&--inactive):hover? And these &:not selectors used combined?
Also, this scss has some strange behaviour - on localhost this doesn't not work - does not apply at all, and when it is deployed on a test server, it got applied and works fine (it gets compiled and minified by gulp plugins).
Any help and advice would be appreciated.
why not compile it and then reason about the output ?
into http://www.sassmeister.com/ put the following
(.parent is just a parent rule which is needed to use the & parent selector)
.parent {
&--active, &:not(&--disabled):not(&--inactive):hover, &:not(&--disabled):not(&--inactive):focus {
background-color: white;
color: grey;
}
}
and behold:
.parent--active,
.parent:not(.parent--disabled):not(.parent--inactive):hover,
.parent:not(.parent--disabled):not(.parent--inactive):focus {
background-color: white;
color: grey;
}
so having the output we return to the matter at hand
&:not(&--disabled):not(&--inactive):hover
is
.parent:not(.parent--disabled):not(.parent--inactive):hover
ergo
any .parent which does not have .parent--disabled and .parent--inactive classes will have a white background and grey color on :hover
(.parent is just an example here - could be div,#foo, ...)
Consider this:
h1 { color: red; color: blue }
Or, a more complex example (taken from a SVG file, stroke is twice):
style="fill:none;stroke:#ffffff;stroke-width:20;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke:#555555"
It seems that the answer is “it’s legal, the last assignment wins”, but I’d really like to know: Is there something written in the CSS specification about this topic?
It is valid to have multiple declarations that assign a value to a property so that the assignments apply to the same element, e.g.
h1 { color: red; }
h1 { color: blue }
Combining the declarations in the same rule does not change this.
There is no explicit statement about this in CSS specifications, so it is allowed simply because there is no rule that forbids it. Multiple declarations are very common, though mostly so that they are in different rules, often even in distinct style sheets. But they can also be used within a rule. A common technique is
p { max-width: 25em; max-width: 60ch }
which means that older browsers that do not recognize the ch unit will use the setting max-width: 25em, whereas in newer browsers, the latter declaration takes effect.
A general rule in CSS is that all other things being equal, latter declaration wins; this is part of the cascade rules. In the case of h1 { color: red; color: blue }, all other things are equal. But in h1 { color: red !important; color: blue }, the first declaration would win.
It is COMPLETELY VALID, h1 { color: red; color: blue } here color will simply be overridden by the next property value i.e blue
Even I use that while my website is in development mode, I often use border: 1px solid #f00; to create a blueprint of the page.
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 defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars
I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
If all you're changing is the background colour, then the following would work, where test.gif is a 40px high image with the top 20px one colour, and the bottom 20 pixels the other colour. If you need to change any other css properties you're pretty much stuck.
table { background: url(test.gif) top; }
table tr { height: 20px; }
http://www.w3.org/Style/Examples/007/evenodd
CSS 3 nth-child. Since browser support is limited you can reproduce the behavior with Sizzle (included in, jquery for example)
(In CSS <= 2) Nope. Unfortunately there aren't any selectors (in CSS <= 2) that operate based on the position (in terms of the number it is within it's parent's children) which I believe you would need to do this with just CSS.
Note to self: read up on CSS3, already!
In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
background-color: green;
}
tr:nth-child(odd) /* same */ {
background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
background-color: pink;
}
tr:nth-child(even) /* same */ {
background-color: pink;
}
Good luck with browser compatibility - you'll need it.
There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.