Lets say I have in my CSS a color definitions:
.headerColor { background-color: #a6c9e2; }
Now I would also like to define a CSS definition that uses .headerColor:
.header { padding-left: 2px; }
On the CSS level, how can I inherit .header from .headerColor?
I know I can place the two styles on the HTML element (class='header headerColor'), but how can I assign .header to my HTML element and have it pull its parent styles?
You can write like this:
.headerColor, .header { background-color: #a6c9e2; }
.header { padding-left: 2px; }
Now, you just need to set class="header" in HTML.
Related
I found a way to override .sb-show-main by having a storybook.scss as below.
//.storybook/storybook.scss
.sb-show-main {
background-color: green;
padding: 16px;
margin: 20px;
}
Then simply import it into .storybook/preview.js
import "./storybook.scss";
The problem I'm facing and couldn't understand is that, background-color: green do have effect, but padding & margin seems to be ignored. Wondering if anyone ever modifying sb-show-main?
The default value for padding is 1rem, I would like to change it to 20px instead.
The styles you are trying to overwrite may be using the css !important directive, or may be more specific in their targeting of an element. I always try to be specific first, but otherwise I will use !important as a last resort.
.container header ul li p {
color: blue;
}
// OVERWRITE STYLES
p { /* this wont work, because it's not as specific as the original rule */
color: yellow;
}
.container header h1 ul li p { /* try this first */
color: purple;
}
p { /* otherwise use !important as last resort */
color: orange !important;
}
<div class="container">
<header>
<h1>Logo</h1>
<ul>
<li><p>One</p></li>
<li><p>Two</p></li>
<li><p>Three</p></li>
</ul>
</header>
</div
I'm theming a project which has a base CSS file. I am meant to style the site using BEM, but am having trouble with this base file (which I cannot edit).
For example, there is a CTA a tag in the main-menu element, whose font-size I have styled as:
.main-menu {
&__cta {
font-size: .875rem;
}
}
But this is overwritten by the base.css:
.main-menu a {
font-size: 1rem;
}
I can make a selector like .main-menu .cta { but this breaks my BEM. I can also use !important; but this feels wrong.
Is there any 'BEM way' of getting around this problem?
PS, HTML for this example would be:
<div class="main-menu">
<!--menu items-->
<a class="main-menu__cta">Call-to-action</a>
</div>
You could use a double ampersand to increase the specificity, like this:
.main-menu {
& &__cta {
font-size: .875rem;
}
}
jsfiddle
The key to this is specificity, try something like below or even including a class or element outside of the snippet you've shown us to make your style more specific to your target.
div.main-menu {
&__cta {
font-size: .875rem;
}
}
Is it possible to check the class of an element, see if it exists, and then apply the style for another class?
Example pseudo code:
if (.myClass .myBlock == true) {
.otherClass {
display:none
}
}
It's not possible in this context. But you can achieve a similar result with the cascading nature of CSS.
Apply a class to the body of your website:
.another-class {
display: none; // hides .another-class by default
}
body.special-class {
.another-class {
display: block; // shows if the body contains .special-class
}
}
Since the specificity of the generated output is higher at the second rule, the elements with .another-class will be visible.
Give the following row a class
Utilising the + selector enables us to display the row after the mentioned class. This way we can style dropdowns popups, given we have the following HTML:
.popup {
display: none;
}
.popup:hover {
display: block;
}
.container:hover + .popup {
display: block;
}
<div class="container">Hover me!</div>
<div class="popup">This is a popup!</div>
I'm afraid that's all that is possible with CSS.
My Html is like this:
<a class="another addAnother">Add another</a>
I defined a style for the above using 'another' class like this in a external style sheet.
fieldset.associations a.another {
color: #693;
display: block;
margin: 7.5px 0px 15px;
}
I am trying to override the style of tag using 'addAnother' class, like this(wherever required):
fieldset.associations a.addAnother {
display: none;
}
But I am unable to override. Any help is appreciated.
Is there any rule that while overriding a style the selector should be same(I tried this, but no avail)??
Both properties have the same importance, because both selectors are equally specific. So if the second one appears first in the CSS, it needs to acquire more importance to override one that is lower down. You could override the first one by being more specific, like this:
fieldset.associations a.addAnother.another {
display: none;
}
or
#someID fieldset.associations a.addAnother {
display: none;
}
or
body fieldset.associations a.addAnother {
display: none;
}
Both your original declarations have a specificity of 0,0,2,2. If the second declaration is below the first, it should overrule it. If it doesn't, reorder your declarations or increase the specificity.
You could add the body tag in order to increase specificity:
body fieldset.associations a.addAnother {
display: none;
}
That will increase specificity by 0,0,0,1, the minimum amount of specificity you can add.
You can also make it specific to the .another class by chaining class declarations:
fieldset.associations a.another.addAnother {
display: none;
}
That will increase specificity by 0,0,1,0.
Here is an article explaining CSS specificity. Note that the article fails to mention that !important increase specificity by 1,0,0,0, making it near impossible to overrule.
fieldset.associations a.addAnother {
display: none !important;
}
It would ultimately depend on where those two styles are in your CSS, but you can't give one more importance like this:
fieldset.associations a.addAnother {
display: none !important;
}
I have a div called mycontent. In this div there is a h2 element. This element inherits global properties, but I would like to change its color only within the mycontent div. I would prefer not to add new class because I would like to operate only within the css.
I have something like that:
#mycontent {
position: absolute;
bottom: 15px;
left: 10px;
}
#mycontent h2 {
color: #fff;
}
Your point being? I mean, you already have the right CSS to achieve what you're asking. The #mycontent h2 {} selector you wrote is right :)