I have a class mainText, it stores the settings for the font, its size, color, etc.
In the first block, everything suits me, but in the second block, all the parameters are repeated, but the color is different.
What is the right thing to do in this situation?
Create a new class and duplicate all properties in it?
Use style on every element of the second block?
I don't understand why classes can't be inherited in css like
.secondText : mainText{
color: white;
}
Normally, you would give both elements the same base class and your second item the additional class:
<div class="base">
I am a div
</div>
<div class="base white">
I am a div, but white
</div>
For the css part
.base {
//base config
}
.white {
color: white;
}
There is no explicit class inheritance in css, yet you could look into mixins in scss or scss overall, because it provides some features css does not have. Hope this could help!
you could use the smame one and add a second class to change the color with high priority.
HTML:
<div class="firstText">Text</div>
<div class="secodText">Text</div>
.firstText, .secondText{
color: black;
:
:
:
}
.secondText{
color: white !important;
}
or you could place the css in the HTML code. for example:
<span class="firstText" style="color: white;">Text</span>
for more info check: Can a CSS class inherit one or more other classes?
Related
Basically, I'm creating a dark theme system for my website, and it adds the dark class to the html tag when the proper function is called. I'm using CSS variables like --light-theme-bg: white; and accessing them with var(--light-theme-bg);. How can I style specific elements such as hr based on if that dark class is attached to the html element. How can I do this?
Scoping is your friend. You'll need to add two rules to your CSS. One for the dark theme and one for the light one.
In those rules, you can define a --background var.
All child elements that reference that var will respect it.
.light {
--background: #f9f9f9;
}
.dark {
--background: #191919;
}
.first,
.second {
color: red;
background: var(--background);
}
<div class="light">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
<div class="dark">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
If you want to select an element inside a .class, use the css syntax .class element, so your code would be .dark hr to select it an hr element inside an element with the class of .dark.
As you mention It added "dark" class to the parent html tag. So considering dark as parent class you can use css to all element like
.dark elements(h1/div/p/others)
I was wondering if there is way to do this.
I want to change only a single property of a specific CSS class, without having it to copy it again and assigning a different class name.
So, if I have this class
<div class="example">I am a red font with properties </div>
It's CSS
.example {
font-size:2em;
font-color:red;
padding:2%;
display:inline;
//other several properties }
Now, I want to use the example class in my other div, but I JUST want the font to be green. I don't want to copy the same property and just assign a different class name,
<div class="example2">I am a green font with properties </div>
Again the example2 will be the same as example, but only the font color will change
It's CSS
.example2 {
font-size:2em;
font-color:green;
padding:2%;
display:inline;
//other several properties same as example class
Is there a way to import the CSS property without having it to copy it and rename it? Something like
<div class="example" onlychange="font-color:green">
I am a green font with properties </div>
Any techniques to achieve something like the onlychange attribute?
Here are two ways. First is add another class and change that one property alone, the second class property will replace the previous class property if its present in both.
Second approach will be to just write it as an inline style. No need for the extra class!
.example {
font-size: 2em;
color: red;
padding: 2%;
display: inline;
}
.green {
color: green;
}
<span class="example green">test</span>
<span class="example" style="color:green;">test</span>
If you are sure that placement of DIV elements will remain same, then, you can try nth-child property.
e.g. https://www.w3schools.com/cssref/sel_nth-child.asp
<div class="example2">I am a red font with properties </div>
<div class="example2">I am a green font with properties </div>
<div class="example2">I am a red font with properties </div>
Your style for that specific "example2" should be :
<style>
div.example2:nth-child(2){background-color:green;}
</style>
Example is with 'background color', you can set 'color' property as well.
I have something like this
<div class="text-holder">
<h2>this is text-holder</h2>
<p>this is text</p>
</div>
<a href="#" class="ignore">
<div class="text-holder">
<h2>this is text-holder</h2>
<p>this is text</p>
</div>
</a>
<a href="#">
<div class="text-holder">
<h2>this is text-holder</h2>
<p>this is text</p>
</div>
</a>
And CSS that does this
.text-holder {
color: green;
}
a {
color: red;
other css
}
.ignore {
other css
}
Is there a way that the link can ignore the css style for the global a style, and just use the ignore? I don't want to use !important because there will be other instances of text-holder that will want to use the global a style.
EDIT
Thanks for all the replies, but let me be a little more clear so hopefully you understand better. (Not the best at explaining)
The problem is text-holder has it's text styling from global p, h2 and etc. Which are above a in the hierarchy of the stylesheet. so p, h2, a, .ignore, .text-holder etc
a has a lot of info on it, hover, visited, focus, color, font-weight and etc. Now for all the divs I wanted to ignore this info I was looking to see if there was a simpler way of just creating an ignore rule, rather than for all the divs I want to ignore it to overwrite them with all the rewritten information.
CSS doesn't support "ignoring", but part of its nature (the Cascading part of Cascading Style Sheets) supports "overwriting"; Newer CSS properties will overwrite older CSS properties of the same name, so you just need to give .ignore a different color value than your previous a selector's color value.
Is there a way that the link can ignore the css style for the global a style, and just use the ignore?
No. If a selector matches then all applicable rules in it will be applied.
.ignore is at least as specific as all preceding rules, so you just need to set the properties you want to override to the desired value.
Yes, basically what you're trying to do is already how CSS works.
The key to understand is the concept of specificity.
CSS rules applied through the style="" attribute have a weight of 1000.
Rules applied against an #id selector have a weight of 100.
Rules applied against a .class selector have a weight of 10.
And rules applied against an element tag name or :pseudo-selector get a weight of 1.
So for example, if you have...
a { color: red; }
.ignore { color: black; }
The weight of the red links is 1, while the weight of black text is 10, so the black has higher specificity and would win.
The important concept is that .ignore doesn't tell it to ignore its old assignment, it is instead a way to override the assignment.
EDIT
I should also add that cascading rules have no weight, so any definition in a child element will override them.
For example:
a { color: red; }
.ignore { color: black; }
div { color: blue; }
<a class="ignore"><div>hello world</div></a>
The text will be blue, not black, because the div tag has a rule applied to it which overrides the cascading black from the .ignore class.
You can try:
:not(.ignore) .text-holder {
color: green;
}
Or if you move your ignore class to .text-holder element
.text-holder:not(.ignore) {
color: green;
}
I'm creating a site that has two sections; a largely static side that uses intricate designs with coloured backgrounds, and a dynamic blog that simply uses a white background.
I've specified in my _settings.scss (Foundation 5) file to use a dark text on white background for all text elements. This is working without issue, and applies to the blog and static side perfectly.
Where I am stumbling is finding an efficient way to manage the different coloured backgrounds and appropriate text styles for each background on the static side.
I have a "dark" & "light" section that use a dark and light blue background respectively, alternating down the page.
I have thus far been using each as a class name that acts as a wrapper around my content. i.e.
<div class="dark section">
<div class="row">
<div class="small-8 columns (etc.)>
<h1> Some Header </h1>
<p> Some text </p>
</div>
</div>
</div>
<div class="light section">
<div class="row">
<div class="small-8 columns (etc.)>
<h1> Some Header </h1>
<p> Some text </p>
</div>
</div>
</div>
That's my HTML. The text (p) is white for both, and I have no issues styling that (overriding _settings.scss). It's the headers that are giving me issue. I am struggling to find a method of targeting the headers in each coloured section without it spilling to the next, alternate coloured section; or without adding numerous classes to each and every instance of the header dependant on background colour.
Thus far I have been using: (colours simplified as I'm using SCSS variables)
.dark {
background-color: dark-blue;
colour: white;
}
.dark h1,h2 {
colour: orange;
}
.light {
background-color: light-blue;
colour: white;
}
.light h1,h2 {
colour: dark-blue;
}
.section {
*insert various padding here*
}
Now this to my mind, should work. However, I'm having the styles from the light class override the styles (where different) in the dark class. i.e. The dark sections have dark-blue headers, rather than orange. I can't seem to stop the selector from riding from one 'section' to another through the cascade.
I've probably made a stupidly simple oversight, but any help would be greatly appreciated.
Just use the descendant selector:
.dark h1 {
color: orange;
}
Here we have selected a class (.dark), and then selected an h1 that is a child at any level to the selected class. So this will apply to any <h1> elements within your <div class="dark section"> element, no matter what level.
If you want to use this descendant selector with multiple elements, you'll need to add the class to each side of the comma. Currently your selection of .dark h1, h2 is selecting all h1 elements that are children of class .dark (as I've explained above), and all h2 elements anywhere in your body, period... and likewise for .light. What you need is:
.dark h1, .dark h2 {
color: orange;
}
.light h1, .light h2 {
color: dark-blue;
}
Note that with your original code above, you are typing colour instead of color. The spec uses American English, so you'll need to fix these unless you have renamed them as variables or something using your pre-processor. Also note that you haven't added a closing " to your "small-8" class names.
I want to give border-bottom to header.the border color should be same as its child font color.please find the html code and suggest me to proceed further.
<header>
<div class="cblt-panel">
<header>
<a href="HomePage;jsessionid=9Z1DRLtK8FfgmVDhysv4fk8LKjj1rTpSpJcS99dvcbffT4KTZ9tN!91184445">
<div class="header-wrapper header">
<h1 class="dealer-name">Airport Chevrolet Cadillac</h1>
</div>
</a>
</header>
</div>
</header>
in the above markup, i want to set the border-bottom-color for outer header tag same as the font color of child h1 tag. is it possible ?
I don't think you can achieve it through pure CSS. If you are able to use jQuery, it's quite simple:
var h1Color = $('.dealer-name').css('color');
$('header:eq(0)').css('border-bottom-color', h1Color);
Demo: http://jsfiddle.net/S9svs/
No, it is not possible: in CSS, parents never inherit from their children.
You can just make an element’s border color the same as its own content color (text color), namely by not setting the border color at all. But to use a color set on a child, you need JavaScript.
A better strategy is to combine the settings so that you simply set the color of a heading element and the color of an enclosing element to the same value. These settings need to be done in separate rules, though, e.g. header { border-color: #060; } h1 { color: #060; }.
If you surely want to do it dynamically then you have to use a css preprocessor language for it...
Like Less CSS
Here you make dynamically define the css and use it like you do in javascript...
For example,
#color:#000;
header { border-bottom-color:#color; }
header h1 { color:#color; }
The funny thing is that border-color, if not set, uses the color property to define it's color, so in some occasions you may be able to do the opposite. eg:
header {
color:red;
border-bottom: 2px solid;
}
header a,header h1 {
color:inherit;
}
DEMO: http://jsfiddle.net/brTTT/
In the demo, hover to see the color change by just changeing the header color property.