Let’s say I have a few utility classes:
.primary-text {
color: blue;
}
.danger-text {
color: red;
}
.display-400 {
width: 400px;
}
.max-width-100 {
max-width: 100%;
}
Do classes like this require the !important keyword?
If you have some other CSS files that are loaded before this file, you have three ways to force your CSS content to load:
add !important
add your CSS file link tag at the end of another link tag
find a more accurate selector for your tag like this:
span.primary-text {
color: blue;
}
This code has higher priority.
But if you don't use any other CSS file that contains these selectors with the same properties, you don’t need to use !important.
Related
I'm trying to slightly modify the styles of a block formatting plugin in Wordpress by overriding them in my own theme stylesheet. I use Sass but I'm new to it.
Pasting all of the selectors right out of Developer Tools works, but I know that's not the elegant/modular way to do it:
.an-accordion.an-accordion--v2.an-accordion.an-accordion--design-basic .an-accordion__heading {
color: gold
}
What's the right way to do this in Sass? I've tried something like this:
.an-accordion {
&--v2 {
&--design-basic {
&__heading {
color: gold;
}
}
}
}
but it doesn't work. I can tell I'm missing something about the way .an-accordion repeats.
You can use the power of local scoped string variables $something:... combined with the power of string interpolation #{...} and combine it with the current selector string & to create a compound selector for any combination of block, element, and modifier. Which I think is quite nice and readable:
.an-accordion {
$modifier-v2: #{&}--v2;
$modifier-design-basic: #{&}--design-basic;
$element-heading: #{&}__heading;
&#{$modifier-v2}#{$modifier-design-basic} {
#{$element-heading} {
color: gold;
}
}
}
which will result in:
.an-accordion.an-accordion--v2.an-accordion--design-basic .an-accordion__heading {
color: gold;
}
I tried it out on sassmeister.com
Note that I omitted the duplicated .an-accordion class in the selector; if this is important for you to increase the specifity you can insert it with #{&}.
BEM is about blocks, elements, and modifiers. Block scope is the biggest one, the element is some part inside the block and the modifier is optional and represents the status of your block-element. In Sass you can nest elements if they are parent and children and you don't need to repeat the parent element, in your stlesheet, if the beginning of your property is the same for both parent and child, but if the beginning is different you must repeat.
In a html like this:
<div class=" an-accordion an-accordion--v2 .an-accordion--design-basic .an-accordion__heading"></div>
You could have some scss code like this:
.an-accordion{
color: #000;
&__heading{
background-color: tomato;
}
&--v2{
font-weight: bold;
}
&--design-basic{
border: none;
}
}
I see some e.g. div/button style in Chrome console like this:
/* Chrome browser styles tab */
.ItemClass1-0-3-171.ItemClass2-0-3-173: {
background-color: "red"
}
How do I define a new style in CSS ignoring that class numbers? because it can be a different number for other div/button on the page..
/* CSS file */
.ItemClass1.ItemClass2 {
background-color: "blue"
}
You can use two attribute contains selectors for this.
[class*="ItemClass1"][class*="ItemClass2"] {
background-color: red;
}
<p class="ItemClass1-0-3-171 ItemClass2-0-3-173">foo</p>
But keep in mind that this will also select elements with the class fooItemClass2.
You can use an attribute selector with a starts-with value to pick up anything that starts with ItemClass.
Note: This solution assumes ItemClass is the first classname and doesn't account for whether the element has both classes. For these reasons Sven's answer might better suit your needs.
[class^='ItemClass'] {
background-color: blue;
padding: 4rem;
}
<div class="ItemClass1-0-3-171.ItemClass2-0-3-173"></div>
Hi I am using a child component which is used globally in my app. So now i want to change few CSS properties for this child component only when it is specific to my requirement. I want to apply different properties for description and end class here. How can achieve this using SCSS and is it possible we can acheive it without important tag ?
*****HTML*******
<my-parent class="parent">
//I have added myflag to identify this has to apply only in case of my scenario
<global-child [class.myFlag]="myFlag===true">
<div class="child">
<div class="description">test</div>
<div class="end">end</div>
</div>
</global-child>
</my-parent>
This is how i tried to apply my css, it is picking up height but not color for description
*****SCSS******
global-child.myflag{
height: 100px !important
&.description{
color: blue !important
}
}
Edit 1: Kenny's answer looks good, but it still didn't work for me. The reason i am thinking is below. If that is correct how can achieve this in my scenario.
"I am adding the new CSS in my-parent.scss. And global child component has its styles in global-child component.scss. I believe my new SCSS code(which is parent) is loading before globalchild. Would that be a reason it is not reflecting on the page? "
Edit 2:
Updated few changes in HTML above and below are my child and parent css
****global child css****
.child {
display: flex;
flex-direction: row;
&-description {
width: 100%;
color: BLACK;
position: relative;
}
}
****Parent css*****
.parent{
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
}
This will work
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
Now when to use &
When you have class on same element
Like if you have element like
<global-child class="myflag description">
Then you should use & to apply properties to global-child element
But in your case .description is child of global-child element.
So this will work
global-child {
&.myflag {
// css properties
.description {
// css properties for `.description` those are child of `global-child.myflag
}
}
.description {
// css properties for `.description` those are child of only `global-child
}
}
Kenny's answer's were right for applying the CSS styles, But the issue for me was due to style scopes in angular. Providing viewEncapsulation as NONE on my angular component resolved the issue for me.
So,
I have appended a home class to body like so:
document.body.classList.add("home")
I want to select appContainer a child element of body class by doing
html body.home #appContainer { ..... }
This works without CSS Modules but was wondering how I can do it with CSS modules. Thanks
You need to use wrap the class that you want to be global into :global(). If your selector uses an element you must write it directly after the element with no space in between, like element:global(.class) which translates into element.class.
Therefore, in your case html body:global(.home) #appContainer is the answer.
For anyone else that comes across this issue, I am using postcss-preset-env and I had to do this:
Worked ✅
.toolTipTest :global .rc-tooltip-arrow {
color: blue;
}
This did not work ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
And neither did this ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
// Neither Did this
.toolTipTest {
&:global(.rc-tooltip-arrow) {
color: blue;
}
}
I'm using ZK and I want to make use of the ZK sclasses for the items in my .zul files.
I saw that you can use things like :
<style>
div.z-tree {
background: none !important;
background-image: none !important;
border: none !important;
}
div.z-tree-body {
background: none !important;
}
tr.z-treerow-seld, tr.z-treerow-over {
background: #00533f !important;
}
div.z-treecell-cnt {
color: #5555ff;
}
.test-class div.z-treecell-cnt {
color: #ff5555 !important;
}
</style>
Where can I find all those styles, like z-tree-body that I can use and all the attributes I can assign to them or how to search for them?
When I need to override some CSS, I always search the specific CSS classes with the browser developer tools.
Because you want to override the CSS of some nodes but not all, try to use sclass to a specific class of your own.
Example :
<style>
.red {
color:red;
}
<style/>
<label sclass="#load(empty vm.property?''':'red')" />
You don't need to use the zk classes if it's for particularisme cases. For overriding them all, you can beter use the zk classes.