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
Related
I want to select all tags with class p, that is child of .row
.row .p {
...
}
but exclude all, that have .disable as parent class (not directly).
I can select both of them like that:
.row .p {
border: 3px solid blue;
}
.disable .row .p {
border: 3px solid red;;
}
But we want to use just one selector
NOTE: between .disable and .row can be any elements.
CLEARIFICATION: .disable .row .p should have no color at all. So if .disable is present somehow in the parent line do NOT make a blue border. just leave it away.
example:
https://codepen.io/miladfm/pen/ELbwMx
Using CSS Custom Properties (aka CSS Variables) you can style an element according to some ancestor if you set a value to this ancestor and get its value on the former. It's inherited throughout the mighty cascade® and if not set, you can have a default value given by the fallback of var(--custom-prop, fallback)
Support is Edge 15+ or 16+ and other modern browsers for a longer time AFAIK
/* If any ascendant has a given class, no border */
.disable {
--parent-disable-border: none;
}
/* Default border with fallback value of a CSS Variable / Custom Property */
.p {
border: var(--parent-disable-border, 3px solid blue);
}
Codepen (sorry no snippet it currently fails in Firefox)
I'm having trouble with the main menu in the header of my Wordpress site here: http://eptestdev.us/qa
The only way I can get it to fill the entire box is by declaring it to have a width of 950px. However, I want it to disappear when the user is on a mobile device leaving just the mobile menu.
My CSS looks like this, but it is not working:
#media screen and (max-width: 900px){#access {display:none;}}
Not sure how I can get it to collapse otherwise. Any help would be appreciated.
You just need to add the !important tag to your css, so that it overrides everything else. Like this:
display: none !important;
I tested this on your site and it worked.
In general it's good to avoid using !important - and instead use CSS's natural way of determining which rule is used.
Earlier rules (at the top of the stylesheet) are overruled by later ones:
.box { width: 200px; border: 1px solid black }
.box { width: 500px; }
The second rule will override the previous width declaration, giving you a 500px box with a black border.
In your case, the reason your media query rule isn't working is because it occurs before the 'normal' one. If you switch:
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
with
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
This rule will work without needing to use !important.
There are other ways to make rules keep: for instance, a more specific rule will be used before one that is more generic:
#menu .submenu-item { color: green; }
.submenu-item { color: red; }
As long as your .submenu-item divs are within a '#menu' div, they'll be green, because the subsequentcolor: red` declaration doesn't have the same level of specificity.
You can read more on this here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I'm using carousel slider more than two times and its .item height is 100%. I had to adjust the main slider on specific height, so i added a class .custom-slider in header tag put the style with !important tag, because there was already 100% height .
.custom-slider {
height: 645px !important;
}
Its adjusted and working fine. Now I have to adjust the on different resolution, so i have to reduce the height 645px to 496px, but due to !important property new added height does not working.
I'm trying following style on 1024 reslution, but its not working.
.custom-slider {
height: 496px !important;
}
This accepted answer is well explained, but i didn't resolve my issue, can any guide me regarding this. I would like to appreciate.
Change the style to max-height and remove the important!
.custom-slider {
max-height: 645px;
}
You could also make the selector more specific by adding the tag or a parents id/class. This would give the style a higher priority.
body div.custom-slider {
max-height: 645px;
}
If your trying to do this within the same resolution ( without using media queries ) you should be able to add a second class and give that a defined height as well - it should overwrite the first one. For example:
<div class="custom-slider secondary-height"></div>
.custom-slider.secondary-height {
height: 496px !important;
}
please check this: http://codepen.io/anon/pen/LGmrwZ
when you define a media query, it will catach the relevant one.
if you go from bottom up, only the relevant !important will catch.
and since they have same "cascading juice" the winner will be:
the one that have the appropriate media trageting and the one that comes last, so combining them will solve the issue.
scss example
.custom-slider{
width:100px;
border:1px solid red;
#media (min-width:700px) {
height: 20px !important;
border:1px solid green;
}
#media (min-width:900px) {
height: 80px !important;
border:1px solid blue;
}
}
by the way, if your css is loaded after the slider's css, you do not need !important.
same goes if you add a parent container to your css.
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
Is it possible to remove the IE-specific behavior CSS property via a more specific rule or the !important declaration? Example:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: /*no HTC*/
}
I realize that overriding CSS properties is undesirable, but I'm stuck here.
On Edit: I'm not sure where people are getting confused about this question. For all purposes, you can consider this already being an IE specific stylesheet. I'm asking how, if .a-rule above exists and is immutable, how can one remove the behavior via a more specific rule? A standard CSS equivalent would be:
.a-rule
{
border: 1px solid black;
}
.a-rule.more-specific
{
border: 0 none;
}
One can reset the border property for a subset of elements via a more specific rule. I'm asking how to reset the behavior property in an analogous way.
The default value is "none". See:
What is the *correct* way to unset the behavior property in CSS?
The solution:
.a-rule
{
behavior: url(/some.htc);
}
.a-rule.more-specific
{
behavior: none;
}
.a_rule {
border: 1px solid black; /* we know border is black */
behavior: url(/some.htc) /* we know something happen inside some.htc */
}
.a_rule.more-specific {
border: 0 none; /* we remove the border */
behavior: url(/some.htc) /* we remove something inside some.htc */
}
use different .htc file
Maybe use conditional tags for IE in your head
<!--[if IE]>
<style type="text/css">
.a-rule {
behavior: url(/some.htc);
}
</style>
<![endif]-->