Let's say we have this:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
In .second-class, Is it possible to only inherit one property from first-class, say, background, while leaving the other properties as default?
No. You have to reset them. .first-class being the parent of .second-class will take its inheritance.
Here is the WORKING EXAMPLE to illustrate your scenario before reset.
Now when you reset it.
Find the below code before and after reset.
Before reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
After Reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
background: inherit;
font-weight:normal;
color:black;
}
Related
I want to style only one character inside the content of an ::after. Is it possible? Considering that the div has content inside.
In this example I want the "↵" to be bold. But not the "press ENTER" text.
.div::after {
content: "press ENTER ↵";
font-size: 11px;
color: #5a5b8d;
}
If there is no other text in the button, you could split your text in between the before and after:
.button {
font-size: 11px;
color: #5a5b8d;
}
.button::before {
content: "press ENTER";
}
.button::after {
content: " ↵";
font-weight:bold;
}
<div class="button"></div>
It's crazy, but this will work. Working example: http://jsfiddle.net/Lf8xvcyq/1/
Try this:
HTML:
<div class="button"></button>
CSS:
.button {
/* Your normal CSS */
}
.button::first-letter {
font-size: 11px;
font-weight: bold;
color: red;
}
.button::after {
unicode-bidi:bidi-override;
direction:rtl;
content: "↵ RETNE sserp";
font-size: 11px;
color: blue;
}
You can consider flexbox and the order property in case you will have content then you will be able to use both pseudo element:
button {
font-size: 11px;
color: #5a5b8d;
display:flex;
}
button::before {
content: "press ENTER";
order:1;
padding:0 2px; /*flexbox erase whitespace so we add padding*/
}
button::after {
content: "↵";
padding:0 2px;
font-weight:bold;
order:1;
}
<button >some content</button>
I have a css file (main.css) and I'd like to override it using another css file (overrides.css). But I have problem doing it as they are in different files and they get different hashes.
This is my css:
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainer h1{
color: blue;
}
From here, I used Object.assign() to combine css files but it didn't help. This is my component:
import React from 'react';
import Main from './main.css';
import Overrides from './overrides.css';
const Style = Object.assign({}, Overrides, Main);
class Sample extends React.Component{
render(){
return (
<div className={Style.mainContainer}>
<h1>Hello</h1>
<p>Hello CSS modules!</p>
</div>
);
}
}
export default Sample;
I expect my h1 to become blue but it won't. This is my compiled css:
/* main.css */
._1pXpG {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
._1pXpG h1{
color: white;
}
/* overrides.css */
.Wmy0p h1{
color: blue;
}
I expect .Wmy0p h1 to be ._1pXpG h1 so it can override. But it won't. Note that if you just paste the content of overrides.css at the bottom of the main css it will work but I need my override css file to be in a separate file.
Thanks in advance
To over ride styles from other file can be made by giving one more specificity from parent div. Mostly specificity solves to override other files CSS.
class Sample extends React.Component{
render(){
return (
<div className={Style.mainContainerDetails}>
<div className={Style.mainContainer}>
<h1>Hello</h1>
<p>Hello CSS modules!</p>
</div>
</div>
);
}
}
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainerDetails .mainContainer h1{
color: blue;
}
You can just use vanilla JavaScript to replace that specific css link on the webpage.
I also suggest using an event listener to wait until the page is loaded & then make the replacement.
Here is an example:
function overrideCommonCss() {
var webpageCurrentLink = "main.css", webpageNewLink = "overrides.css", webpageFoundLink, webpageCssTags = 0,webpageAllCssLinks = document.getElementsByTagName("LINK");
if (webpageAllCssLinks) {
for (webpageCssTags = 0;webpageCssTags < webpageAllCssLinks.length;webpageCssTags++) {
webpageFoundLink = webpageAllCssLinks[webpageCssTags].href;
if (webpageFoundLink.indexOf(webpageCurrentLink) !== -1) {
webpageAllCssLinks[webpageCssTags].href = webpageAllCssLinks[webpageCssTags].href.replace(webpageCurrentLink, webpageNewLink);
break;
}
}
}
}
if(window.attachEvent) {
window.attachEvent("onload", overrideCommonCss);
}
else {
window.addEventListener("load", overrideCommonCss, false);
}
have you tried using the !important in css? I believe that seems to be the problem. Below is an example, in plain html:
/* main.css */
.mainContainer {
padding: 16px;
margin: 16px;
background-color: palevioletred;
border-radius: 5px;
}
.mainContainer h1{
color: white;
}
/* overrides.css */
.mainContainer h1{
color: blue;
}
<div class="mainContainer">
<h1>Hello World!</h1>
</div>
As you can see, using !important works pretty well for me...
I don't use currentColor very often but when I do, it's extremely useful.
So I've been a little excited about the arrival of CSS Variables.
Let's take a traffic light.
N.B. Please take it on trust from me that Japanese traffic lights go red to amber to blue. I know it's hard to believe. I know the blue light looks sort-of green. But it isn't, it's blue.
div {
float: left;
width: 200px;
}
div div {
float: none;
}
.top {
color: rgb(255,0,0);
}
.middle {
color: rgb(255,227,0);
}
.bottom {
color: rgb(63,255,63);
}
.jp .bottom {
color: rgb(0,255,191);
}
.light {
text-align: center;
}
.light::before {
content: '';
display: block;
margin: 6px auto 0;
width: 25px;
height: 25px;
border-radius: 15px;
background-color: currentColor;
}
<div class="uk">
<h2>UK Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Green</div>
</div>
<div class="jp">
<h2>JP Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Blue</div>
</div>
Now, the clever thing about
background-color: currentColor;
is that it just reads whatever the current value for color is and uses that.
By contrast...
background-color: var(--current-color);
That can't reference the current value of another style declaration, can it?
So, you'd need to set up 4 variables (just like you need to declare color: 4 times in the styles above):
.top {
--color-top: rgb(255,0,0);
}
.middle {
--color-middle: rgb(255,227,0);
}
.bottom {
--color-bottom: rgb(63,255,63);
}
.jp .bottom {
--color-bottom-jp: rgb(0,255,191);
}
And then... you need to reference each of those different variables later on. Which means a different background-color declaration for each variable:
.top::before {
color: var(--color-top);
background-color: var(--color-top);
}
.middle::before {
color: var(--color-middle);
background-color: var(--color-middle);
}
.bottom::before {
color: var(--color-bottom);
background-color: var(--color-bottom);
}
.jp .bottom::before {
color: var(--color-bottom-jp);
background-color: var(--color-bottom-jp);
}
Really?!
That can't be right. Have I missed something?
Is there no way to reproduce currentColor with var(--current-color) ?
Is there no way for CSS variables to represent the current value of another style declaration?
Actually, you can set a CSS custom property instead of setting directly the color property, and use it for color and background-color.
/* Set global variable inside the :root scop */
:root {
--color-top: rgb(255,0,0);
}
div {
float: left;
width: 200px;
}
div div {
float: none;
}
/* Set the local --color variable, according to your need */
.top {
--color: var(--color-top);
}
.middle {
--color: rgb(255,227,0);
}
.bottom {
--color: rgb(63,255,63);
}
.jp .bottom {
--color: rgb(0,255,191);
}
.light {
color: var(--color);
text-align: center;
}
.light::before {
content: '';
display: block;
margin: 6px auto 0;
width: 45px;
height: 45px;
border-radius: 15px;
background-color: var(--color);
}
<div class="uk">
<h2>UK Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Green</div>
</div>
<div class="jp">
<h2>JP Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Blue</div>
</div>
I do not really understand why you are not using background-color: currentColor, because it works well in your own example.
If you are using SASS (which is compiled into css), then you can use SASS variables. The code will look like :
$font-stack: Helvetica;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
more informations on the SASS official website
How can I add CSS comments in LESS nested rules? Ex:
div{
span{
font-size: 16px;
color: #fff;
}
/*This is my comment*/
em{
color: blue;
}
}
This is the output I expect to get:
div span {
font-size: 16px;
color: #fff;
}
/*This is my comment*/
div em {
color: blue;
}
But, unfortunatelly this is how it is processed:
div {
/*This is my comment*/
}
div span {
font-size: 16px;
color: #fff;
}
div em {
color: blue;
}
Is it possible to make this?
This isn't possible using /* */.
The reason being that it is still under the div scope, so it won't work using /* */ comments.
However, in LESS you can use // for single line comments which doesn't go through the compiler (so doesn't end up in the compiled CSS code but will be in the LESS code).
Here is the official documentation on comments.
Well, you can get your comment inside nested rules:
div {
em {
/* This is my comment */
color: blue;
}
}
output:
div em {
/* This is my comment */
color: blue;
}
I hope this would be useful for you.
/*This is my comment*/
div {
em {
color: blue;
}
span {
font-size: 16px;
color: #fff;
}
}
and the output will be,
/*This is my comment*/
div em {
color: blue;
}
div span {
font-size: 16px;
color: #fff;
}
More or less it would be like what you are expecting !!!
I've got a class
.text2{
font-size: 1.2em;
color: #473f37;
padding-bottom: 0.3em;
}
I want text of links to appear white within this class, how do I do it?
<div class="text2">
Notices
</div>
I tried the below and it not working
.text2 a:link{
color: white;
}
.text2 a { color: #ffffff; }