While I know you can't write variables like
root: {
--aic: align-items:center;;
}
Is there anyway to get round this, by combining the various parts seperately? The obvious obstical here is the requirement of the colon inside the variable.
i.e.
root: {
--ai: align-items:;
--center: center;
--aic:
var(--ai)
var(--center);
}
.myclass {var(--aic);}
I would suggest you to switch to SCSS and use a #mixin. Read more about it here.
Here's a live demo.
HTML:
<div id="test">TEST</div>
SCSS:
:root {
--text_color: red;
--background_color: gold;
}
#mixin my_mixin {
color: var(--text_color);
background-color: var(--background_color);
}
#test {
#include my_mixin;
}
Based on my comment on your question, you can use classes to achieve something similar. But you can't use custom properties as CSS properties, only values -- it's the same as saying for example margin: margin: var(--customMargin);;
/* Layout unrelated to answer */
div { border: 1px solid black; color: white }
.varText { background-color: red }
.varPad { background-color: blue }
.varText.varPad { background-color: green }
/* Answer */
:root { --size: 1rem }
.varText { font-size: var(--size) }
.varPad { padding: var(--size) }
<div class="varText">
Size Text only to root variable
</div>
<div class="varText" style="--size: 2rem">
Size Text only to inline variable
</div>
<div class="varPad">
Size Padding only to root variable
</div>
<div class="varPad" style="--size: 2rem">
Size Padding only to inline variable
</div>
<div class="varText varPad">
Size Text and Padding to root variable
</div>
<div class="varText varPad" style="--size: 2rem">
Size Text and Padding to inline variable
</div>
Related
i have setup react big calendar on two different pages and have applied some styling on it through external CSS
i have tried using important tag in css but it only fix one page and disturb other
First file CSS
.rbc-timeslot-group {
min-height:120px ;
/* border-left: 1px solid #000000 */
}
Second file CSS
.rbc-timeslot-group {
min-height:20px ;
/* border-left: 1px solid #000000 */
}
i want to achieve different CSS on both pages but end up fixing one and disturbing other
Update
This is how I'd approach things using React/JSX:
class Demo extends React.Component {
render() {
const BigCalendar = ({classes}) => (
<div className={`rbc-timeslot-group ${classes}`}></div>
)
return (
<div>
<BigCalendar />
<BigCalendar classes="second" />
<BigCalendar classes="third" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector("#app"))
And the CSS
.rbc-timeslot-group {
width: 50px;
height: 50px;
background-color: red;
}
.rbc-timeslot-group.second {
background-color: green;
}
.rbc-timeslot-group.third {
background-color: blue;
}
jsFiddle
You need to introduce greater specificity in your CSS. For example, start with a base style that works for the default case and, most importantly, is available to all pages, globally.
.rbc-timeslot-group {
min-height: 120px ;
}
Then, extend from there using another class. This would be declared on another page.
.another-page.rbc-timeslot-group {
min-height: 20px;
}
<div class="rbc-timeslot-group another-page">…</div>
And so on…
.yet-another-page.rbc-timeslot-group {
min-height: 40px;
}
<div class="rbc-timeslot-group yet-another-page">…</div>
Don't know whether its an elegant solution,but was able to resolve my issue by enclosing my component in another div and overriding that div e.g
<div className="first">
<BigCalendar>
</BigCalendar>
</div>
<div className="second">
<BigCalendar>
</BigCalendar>
</div>
in css
I did
.first.rbc-timeslot-group{
min-height:20px !important;
}
.second.rbc-timeslot-group{
min-height:20px !important;
}
I have three class : product1, product2, product3. I can add css to all these class as follows:
.product1, .product2, .product3{
// add css here
}
But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:
.product1to3{
// fun with css.
}
Is there any approach in css?
There is no such kind of css pseudo on what you wanted to achieve.
You can try to use SASS to achieve what you wanted.
and then use the #for Directive
SASS
#for $i from 1 through 3 {
.product#{$i} { width: 20px; }
}
CSS
.product1 {
width: 20px;
}
.product2 {
width: 20px;
}
.product3 {
width: 20px;
}
Also you can try to use LESS
Hope this helps
pure css implementation JSfiddle
So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range
div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
background: red;
}
Really good article on complex css and nth:child
/* This selects all the elements which have the class name starting with
"product"
*/
[class ^= "product"] {
//CSS
}
If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".
[class*="product"]
div{
border:2px solid tan;
height:40px;
}
[class*="product"]{
background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>
It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.
Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.
html
<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>
css
/* shared styling */
.product {
display: flex;
background-color: gray;
border: 1px solid red;
}
/* individual styling */
.product1 {
color: black;
}
.product2 {
color: white;
}
.product3 {
color: blue;
}
I am building a web site that is basically made out of sections + rows + columns and to each element you can apply a color scheme.
If the color scheme is applied to the section, all the rows and columns within it will have the same color scheme, however, sometimes I want to add a color scheme to a single column to differentiate it, but in some cases the parent section color scheme css is placed AFTER the color scheme css for the column (in the css file), and then it applies the colors for the section instead of the columns.
Here is the code (simplified for the sake of example).
I could get around it in specific cases, using !important, but I am looking for a global solution.
CSS:
/* Grey */
.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
HTML:
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
Thanks!
This is expected behaviour as a direct result of Cascade Precedence.
If two rules carry the same weight or specificity the rule declared last always wins and over-qualifies the other.
Use more Specificity
Consider declaring another element or class selector in the range of the contextual selectors already specified.
Example:
Added element selector (div) for more specificity...
div.color-scheme-grey button { ... }
Added a class selector (.section) for more specificity...
.section .color-scheme-grey button { ... }
Code Snippet Demonstrations:
1. Additional Class Selector:
/* Grey */
.section .color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
2. Additional Element Selector:
/* Grey */
div.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
For Further Information regarding CSS Specificity:
Specificity - CSS | MDN
Specifics on CSS Specificity | CSS Tricks
Apply your styles from the parent like below.
.section .color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
DEMO
You could increase the specificity of the rules to counteract the order of the files:
/* Grey */
.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
.color-scheme-blue .color-scheme-grey button {
background-color: #666666;
}
You need to be careful with this, though, as it can very quickly get out of hand with all the combinations!
Better would be to organise a set of formatting that applies to rows/sections and, separately, columns, and organise them appropriately in a file (sections first).
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 6 years ago.
I'm trying to style a certain <div> in my markup with CSS/SASS, and I'm clueless as to why it's not applying the rules. This is my markup:
<div class="row addon-header">
<div class="col-sm-3">
// something here
</div>
<div class="col-sm-9">
<h2>Title</h2>
<h6><em>Slogan</em></h6>
<div class="col-xs-1">
// I want to access this
</div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
And this is the SASS I'm trying to use for it:
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1:first-child {
background-color: black;
padding-left: 0px !important;
}
}
If I remove the :first-child selector in my SASS, it's working, but obvious for every <div class="col-xs-1"> not just the first one, which is not what I want.
I also tried playing around and doing something like
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1 {
&:first-child {
background-color: black;
padding-left: 0px !important;
}
}
}
or
div.addon-header {
color: white;
> div.col-sm-9 {
> div.col-xs-1:first-child {
background-color: black;
padding-left: 0px !important;
}
}
}
or using :nth-child(1) instead. Nothing works. I'm clueless. Somewhere else in my SASS, I have the following:
.tab-content {
>.tab-pane:first-child > form > div.row > div {
// rules here
> div.picture-container {
// rules here
}
}
>.tab-pane {
// rules here
}
>.tab-pane:nth-child(4) > form {
// rules here
}
}
Which is working just fine. So I really don't get what I'm doing wrong in the first example. Anyone able to help?
You need the :nth-of-type() (or, in your case, the :first-of-type selector).
In the example your provided the :first-child of .col-sm-9 element is the h2.
div.addon-header {
color: white;
> div.col-sm-9 > div.col-xs-1:first-of-type {
background-color: black;
padding-left: 0px !important;
}
}
Note, though, that the :nth-of-type() selectors, like the :nth-child() selectors, apply to tags only, not class names; if you were to insert another div before the first .col-xs-1 then this would no longer work.
col-xs-1 need to wrap row because this block is not first element. First element is h2
Can somebody please explain what the inherit keyword means in CSS and how it works?
It will use the same value as the same property its parent has.
body {
margin: 234px;
}
h1 {
margin: inherit; /* this equals 234px in this instance */
}
<body>
<h1></h1>
</body>
If there are multiple instances of <h1> in the file, it will take the margin of its parent, so 234px is not always the value it will have. For example:
<body>
<h2></h2>
<div>
<h2></h2>
</div>
</body>
body {
margin: 20px;
}
div {
margin: 30px;
}
h2 {
margin: inherit; /* 20px if parent is <body>; 30px if parent is <div> */
}
To clarify, inherit doesn't do anything unless you're using it to override another style rule, otherwise it's just reinforcing the default behavior. Note that the overriding rule should be higher specificity or be below the rule that it overrides.
.pink {
background-color:pink;
}
.green {
background-color:lightgreen;
}
.override {
background-color:inherit;
}
<div class="pink">
<p class="green">I'm classed "green", and I am green.</p>
<p class="green override">I'm also classed "green" but `inherit` overrides this and causes me to inherit pink from my parent.</p>
</div>