I am using vue js's ELEMENT UI. And i want to override its style. I can do it with global style. But scoped style doesnt work. When i used global style it changes my all pages design. but i want to do it just for one page.
Here is my style(global style. and this is working):
<style>
.el-icon-close:before{
content: "Back" !important;
}
</style>
but when i used scoped it doesnt work:
<style scoped>
.el-icon-close:before{
content: "Back" !important;
}
</style>
Is there any idea about this?
The scoped keyword means that this the changes to the style will apply only to the elements in the current scope. Meaning all custom made elements in the page. If you want to access elements "created" somewhere else you will have to skip the scoped keyword. The code that is in the scoped tag will apply only for the current page/view else it will apply for all pages/views.
All not scoped elements usually are style in the App.vue file. If you want to apply style of element that is not scoped just wrap it in a div add the class to it and style it in the scoped tag:
<style scoped>
.my-custom-div{
.el-icon-close:before{
content: "Back" !important;
}
}
</style>
Atleast that is working with me.
You must use custom class:
.custom-class{
smthng goes here...
}
This is achievable with Deep selectors
For your use case:
<style scoped>
.parent-div /deep/ .el-icon-close:before{
content: "Back" !important;
}
</style>
I have a link to whom I have given a class now I want to style that link.
Click
.link1 doesn't seem to work.
<style>
.link1 {
// CSS goes here
}
</style>
I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class.
i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.
.buttonDisabled
{
Cursor:text !important; Text-Decoration: None !important;
}
The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.
I have really simple solution for this.
just create a new class
.noHover{
pointer-events: none;
}
and use this to disable any event on it. use it like:
<a href='' class='btn noHover'>You cant touch ME :P</a>
You can achieve this using :not selector:
HTML code:
<a class="button">Click me</a>
<a class="button disable">Click me</a>
CSS code (using scss):
.button {
background-color: red;
&:not(.disable):hover {
/* apply hover effect here */
}
}
In this way you apply the hover effect style when a specified class (.disable) is not applied.
Here is way to to unset the hover effect.
.table-hover > tbody > tr.hidden-table:hover > td {
background-color: unset !important;
color: unset !important;
}
For this I ended up using an inline style because I only wanted the one particular element not to have any hover on-click event or style due to it just being part of instructions regarding the other buttons that looked like it on the page, and to give it override precedence. Which was this:
<button style="pointer-events:none"></button>
This removed all styling and bound JavaScript/JQuery functionality on the single element for me, while not affecting the others on the page :). For more info see the mozilla reference.
To disable the hover effect, I've got two suggestions:
if your hover effect is triggered by JavaScript, just use $.unbind('hover');
if your hover style is triggered by class, then just use $.removeClass('hoverCssClass');
Using CSS !important to override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.
From your question all I can understand is that you already have some hover effect on your button which you want remove.
For that either remove that css which causes the hover effect or override it.
For overriding, do this
.buttonDisabled:hover
{
//overriding css goes here
}
For example if your button's background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.
Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.
Best of luck.
Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:
pointer-events:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.buttonDisabled {
pointer-events: none;
}
</style>
</head>
<body>
<button class="buttonDisabled">Not-a-button</button>
</body>
</html>
Add the following to add hover effect on disabled button:
.buttonDisabled:hover
{
/*your code goes here*/
}
Use transition: all 100s ease-in-out; to override the hover change. This is not a solution but a workaround if you do not know the original value of the property which you want to replace.
Other solutions didn't work for me.
I simply changed this
.home_page_category_links {
color:#eb4746;
}
to this:
.home_page_category_links, .home_page_category_links:hover {
color:#eb4746;
}
That means the same styles that are applied to elements of that class are also applied to elements of that class when hovered.
Extra note: If you're keeping the colour the same, perhaps you may also want to avoid any underline, if so, just include text-decoration: none; as well (or text-decoration: none !important; if using bootstrap).
I tried the following and it works for me better
Code:
.unstyled-link{
color: inherit;
text-decoration: inherit;
&:link,
&:hover {
color: inherit;
text-decoration: inherit;
}
}
What I did here is that I make the hover effect on the button but doesn't apply to the button that has the disabled class
button:hover:not(button.disabled){
background-color: rgb(214, 214, 214);
color: rgb(0, 0, 44);
}
Problem which I understood - Well I was doing something the same as yours. I have used four links among which two of them will hover and the other two will not. Now that I have used the a tag(hyperlink tag in HTML) to use hover, all my hyperlinks start hovering, which I don't want.
So, I put the two a tags which were not supposed to hover inside the same class, say .drop, and use the class to specify that I want all a tags inside the dropped class not to hover but the other a tags do.
To do so, I just wrote a CSS
a:not(.drop):hover {background-color: limegreen}
what I meant here is that apply a hover to all the tags but not the ones which are inside the .drop class.
Hope that helps!
#Simone Colnaghi was the first to mention it, and it worked for me too.
I have also faced the similar problem but the below method works for me.
Lets suppose you have two class, wantsHover and dontWantsHover just use:
.wantsHover:not(.dontWantsHover):hover {
background-color: red;
}
I got a CSS-related issue..
How can we perform if/else in CSS...
for example, i have a CSS file named main.css and two HTML pages namely a.html and b.html.
Inside body {} element (main.css) , the background-color will always be #dad4d4.
For a.html, the body will inherit this color property, but for b.html, i want the body background-color to be changed to #eae1e2.
How to make this a success?
You cannot parse functions within a standard .css file.
However, a solution to what you want to do:
body.a {
background-color: red;
}
body.b {
background-color: blue;
}
Then simply use <body class="a"> or <body class="b">on each respective page.
Put an id or class attribute on your <body> element.
For example, on a.html it would be <body id="a"> and on b.html it would be <body id="b">. You can then do:
body#a {
background-color: blue;
}
body#b {
background-color: green;
}
You could give your body a class to achieve this.
In a.html your body will have class 'a', in b.html class 'b'.
Each class can then have it's own properties.
As far as I know if else is not possible in CSS
I have a css class rule:
.test{ text-align:center; font-family:Verdana; }
And i want to create another id rule (I hope It is right calling by "id rule" ):
#divNew1{ color: Red; }
#spanNew2{ color: Green; }
#pNew3{ color: Yellow; }
I have a lot of div elements. I want to pass .test class properties to other elements with only changing css file. That's why i don't want to add class attribute to div elements. The html code below:
<div id="divNew1">Ta ta taaaaa</div>
<span id="spanNew2">Ta ta taaaaa</span>
<p id="pNew3">Ta ta taaaaa</p>
But i want to add .test class properties to #divNew class by using inheritance and i don't want to add class attribute to the div like as above.
Is there any way to do this?
Just include the ID class on the upper declartion, the last declaration for any property wins. E.g. if the first rule had a color: Green;, .test would be green, #divNew would still be red.
.test, #divNew{ text-align:center; font-family:Verdana; }
#divNew{ color: Red; }
I believe the question is, can my "#divNew" CSS rule inherit the properties of the existing ".test" rule so that:
[Psuedo Code]
.test { color: red; }
#divNew : .test { border: 1px solid Black }
... results in an element with an id of #divNew getting both red text and a black border.
And the answer is no - there is no syntax for declaring the inheritance of one rule by another rule - but you can apply multiple CSS rules to one element.
In this example, the element would take the rules for "#divNew" and ".test" and ".another". It would override any conflicting properties with the last rule in your CSS.
<div id="#divNew" class="test another">...
LESS/dotLess allow you to perform additional processing within a CSS file on the server side, using a CSS style syntax. LESS. I'd link to dotLess, but I can't find a functioning link at present (http://www.dotlesscss.com/ is coming up empty for me)
edit
Or T4CSS from Phil Haack
What do you mean by inheritance? If in your HTML #divNew is a child of .test, then CSS properties of .test are already inherited by it (unless you override them by setting specific #divNew properties).
Syntax for adding properties directly to #divNew which is also .test:
#divNew.test {/*properties*/}
Syntax for adding properties to #divNew which is a child of .test:
.test #divNew {/*properties*/}
<div id="divNew" class="test">Ta ta taaaaa</div>
Not sure to understand you, but:
.test{ text-align:center; font-family:Verdana; }
#divNew.test{ color: Red; }