I have a particular piece of code in a component which is as follows:
return (
<div className="Home" id="Home">
<Customnav color="" height="80px" padding="5vh"/>
<div className="parent">
<div class="col-5 son">
<span id="codeflow-text" className="codeflow-text">Codeflow</span>
<span style={{color:"black", fontSize:"70px", fontFamily: "Arial"}}><b>Learning</b></span>
</div>
<div class="col-7 daughter">
<img src={img1} alt="loading"/>
</div>
</div>
</div>
);
Now I have imported Home.css in this js file part of which is as follows:
div#Home span.codeflow-text {
color: "#1cbdd6" !important;
font-size: "70px";
font-family: "Raleway";
}
Now according to me, the word "Codeflow" should import the attributes which I defined but it's not working. On Inspecting I am getting this in the browser:
I tried to increase the specificity and I know the rule of using !important. But something seems to be wrong here. Please help.
In CSS, the value of property should not be wrapped within "(Except some special case). Change your Home.css file as follow
div#Home span.codeflow-text {
color: #1cbdd6 !important;
font-size: 70px;
font-family: Raleway;
}
Why do you add "" between color and font-size. Just remove them.
Related
Let's say we have a third-party CardComponent like this
<Card title="This is a title in the header">This is text in the body</Card>
And this renders in plain HTML
<div class="Card">
<div class="CardHeader"></div>
<div class="CardBody"></div>
</div>
And I'm using css modules for styling (scss in this case).
.customCard {
.CardBody {
color: red;
}
}
And then add the class to Card
import styles from ...
...
<Card className={styles.customCard} ...>...</Card>
Above will not work because it creates a generated class for CardBody like CardBody_sjkdh43. Is there a way to select non generated classnames in modules? Or is this only possible in the old fashion way to use a stylesheet?
Demo SandBox
It's an old question but the answer is :global() selector in css modules.
For more info: Exceptions - CSS Modules
Example the code:
<div class={styles.myClass}>
<SomeComponentWithOwnCss />
</div>
Output:
<div class="myClass_s4jkdh3">
<div class="SomeComponentWithOwnCss"></div>
</div>
And CSS:
.myClass div:global(.SomeComponentWithOwnCss) {
background-color: red;
}
Working example overhere: codesandbox
a small addition to #Closery's answer, you saved my ass man❤️.
you could try this for a more convenient approach with SCSS:
.parent :global {
.non-cssmodule-class {
color: red;
}
}
<div className={styles.parent}>
<div className="non-cssmodule-class" />
</div>
output:
<style>
.filename-parent__7MR41 .non-cssmodule-class { color: red; }
</style>
<div class="filename-parent__7MR41">
<div class="non-cssmodule-class"></div>
</div>
<div id="chart-id-149" class="big_number_total">
<div class="superset-legacy-chart-big-number no-trendline" style="height: 98px;">
<div class="header-line" style="font-size: 18px; height: 49px;">
<span>30</span>
</div>
<div class="subheader-line" style="font-size: 3px; height: 30px;">% Conversions</div>
</div>
</div>
Kindly note that I want to reference subheader-line class for the id: chart-id-149. So the condition should be the text within id of chart-id-149 and class subheader-line should have the colour blue.
Here's what my code looks like:
#chart-id-149.subheader-line {
color: blue;
}
But I see no effect, please do let me know where am I going wrong.
you are missing a space before dot (.)
#chart-id-149 .header-line
{
color: blue;
}
Descendant elements are selected with a space in CSS, so you need:
#chart-id-149 .header-line
I am trying to override the right property for a h1 element that it is inheriting from the carousel-caption bootstrap class. It inherits right:15% and I am trying to set it to 0%. I found another post that led me to add id="bootstrap-overrides"to the tag and then use the selector: #bootstrap-overrides h1.second but this still doesn't remove the property. I check also in the inspect element and this property is not crossed out. When I uncheck this property in the inspect element I am left with the behaviour I desire.
code from React component:
<div id="initialImage">
<img src={logo} alt="Failed to load Image" class="img-fluid" />
<div class="carousel-caption greeting">
<h1 class="first">First.</h1>
<h1 class="second">Second.</h1>
</div>
</div>
CSS:
#bootstrap-overrides h1.second {
right: 0%;
float: right;
font-family: "Rock Salt", cursive;
color: #fff2f4;
}
and as mentioned I have an id #bootstrap-overrides in the body tag of my index.html. Could it have something to do with the location of the import for boostrap?
Just to confirm, are you adding id="bootstrap-overrides" directly to the h1?
If so, your css should look like this: h1#bootstrap-overrides otherwise, if you are applying it to the parent of h1, then try adding important to your css like so: #bootstrap-overrides h1 { right: 0!important; }
I would like to change the font size of this, this has paragraph tags within. How do I change it? I am using wordpress and I can add custom CSS to fix this.
Here is my wordpress site that I am trying to fix using Inspect Element in Chrome and Firebug in Firefox. http://defensionem.com/2015/09/14/us-military-demo-3/
<div class="body-text clearfix" itemprop="articleBody">
I tried using this, but no avail.
div[itemprop="articleBody"]
{font-size:32px;}
You could try using CSS Attribute Selectors, such as:
Html
<div class="body-text clearfix" itemprop="articleBody"><h1>Test</h1>
Css
div[itemprop="articleBody"] h1 {
color: red;
}
and
div[itemprop="articleBody"] h1 {
color: yellow;
}
example: http://jsfiddle.net/bEUk8/
Check this out..
This will help you..
div[itemprop="articleBody"] {
font-size: 32px!important;
color: red!important;
}
<div class="body-text clearfix" itemprop="articleBody">
<h1>Hello World</h1>
</div>
I am trying to find out the rule on how to target a class inside cascaded ids and classes so that I will be able to style specific area of a page when I need to modify things. Specifically wordpress child themes.
I have search for a while and so far results are giving me specifics to a particular situation. I like something general that will help me read html and target specific classes to style.
For example in this HTML.
<div class="one-third">
<div id="nav_menu-4" class="widget widget_nav_menu">
<h1 class="title">
<cufon class="cufon cufon-canvas" alt="About " style="width: 72px; height: 24.05px;">
<canvas width="91" height="27" style="width: 91px; height: 27px; top: -2px; left: -1px;"></canvas>
<cufontext>About </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="us" style="width: 27px; height: 24.05px;">
</h1>
<div class="menu-about-us-container">
</div>
</div>
I am trying to change font of H1 Title when it is within a side bar. I tried this but didn't work.
.one-third .title {
font-family: Impact;
}
What is the rule/formula to get specific selector to target specific classes.
Thanks
Try using a selector before the pseudo-class, see:
http://www.w3schools.com/css/css_pseudo_classes.asp
On CSS Syntax
you need to add h1 tag .one-third h1.title {font-family: Impact;}