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)
Related
Hi I have this current CSS for fullCalendar (v 1.6.4):
.full-calendar .fc-content .fc-event-container .fc-event {
background: #ef6262!important;
border-color: #eb3d3d!important;
color: #fff!important;
border-radius: 0;
}
When I add a new Class to an event (based on some programming calculations) I do this:
event.className = 'paused-event';
calendar.fullCalendar('updateEvent', event);
My paused-event CSS is this:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB;
}
The background color changes correctly, the border stays the same as the default CSS.
Expectancy:
The event color AND border should change when the paused-event class is present.
The !importants are overriding the latest class properties. You could try to add !important to .paused-event properties as well, but the best would be to avoid any !importants and simply override by impacting with a deeper selector (although it's weird the background does change considering the important):
.class1 vs div.class1.class2 (deeper one)
Anyways, if you simply need to solve that and fast you can try:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB !important;
}
Right now I have CSS (SASS) code that does this:
.container
background-color: red
.inner
...
border-bottom-color: red
(in this case, the .inner is a triangle, so its border color is serving as its background color)
I'd like to avoid specifying the second 'red', something like:
.container
background-color: red
.inner
border-bottom-color: attr(parent.background-color)
Is there a way to do this in pure CSS? (I can do it using SASS variables, or JS, or whatnot, but I'd like to stay within CSS.)
There's no way (currently) to do this in pure CSS, but since you mentioned you're using SASS, you could simply use a variable:
$myColor: red
.container
background-color: $myColor
.inner
border-bottom-color: $myColor
Edit
Depending on how the rest of your CSS is structured and since you're dealing with border-color you can set either border-color or color on .container and then set border-bottom-color: inherit; on .inner:
.container {
border-color: red;
background-color: red;
}
.container .inner { border-bottom-color: inherit; }
This is specific to the properties in your example, however. There is no way to explicitly inherit values across different properties.
CSS variables are in a very early stage of the specification process.
This is something that will definitely come, but you can't really use it nowadays. (MDN states that Fx 29 supports it already)
Example:
::root {
var-brand-color: red;
}
.container {
background-color: var( brand-color );
}
.container .inner {
border-bottom-color: var( brand-color );
}
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.