I'm using JavaFX, and in my CSS I have
.button:hover{
-fx-background-color: red;
}
Which works. But when I try to use another property,
.button:onMousePressed {
-fx-background-color: red;
}
Or onMouseEntered (which I expected to be the same behavior as hover), nothing happens. Is there something fundamentally different about how these work?
Those simply aren't valid CSS pseudoclasses for a button. You are probably looking for
.button:armed {
/* ... */
}
The valid pseudoclasses are listed in the CSS documentation
Related
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>
I'm trying to change the color of a scrollbar-thumb in my SCSS file.
I tried using the scrollbar-color, but only using webkit is working.
// NOT WORK
.demo {
scrollbar-thumb: #0f0f0f;
}
// WORK
.demo{
//....
&::-webkit-scrollbar-thumb {
background-color: #0f0f0f;
}
}
I understood that webkit is working only with some browsers, so I want to make it as general as possible, so whatever browser the user uses, it'll show the new color.
Thanks all
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
I'm wondering, I have alot of image on my website that behave depending on the class. I was wondering if it would be possible using CSS to do this for example.
.willReactOnHover.class1{ background: url('../images/image1.png');}
.willReactOnHover.class2{ background: url('../images/image2.png');}
And then, on hover
.willReactOnHover:hover{
background: /*Here, .class1 would be .image1-hover.png AND
.class2 would be .image2-hover.png */
}
I don't know if it's possible to just had a suffix -hover to all the existing path even if different... I know in javascript I could but I'd love a pure CSS solution else I'll have to create the hover event for every class but since it's the same task for each class I don't know if there's a way it'd be optimal. Or maybe is there a CSS selector that I could use to achieve this?
before CSS-3 people often used background-position along with a image-sprite so you could use the old-horse background-position , like so :
.willReactOnHover.class1{ background: url('../images/image1.png');}
.willReactOnHover.class2{ background: url('../images/image2.png');}
.willReactOnHover:hover{
background-position:-10px;
}
Unfortunately this seems to be impossible with pure CSS at the moment. If you use a prepocessor, like LESS, you could use a loop to accomplish what you want very easily:
Example CSS
#url: "../images/image";
#ext: ".png";
#hover: "_hover";
.generate-images(5);
.generate-images(#n, #i: 1) when (#i =< #n) {
.class#{i} {
background-image: url("#{url}#{i}#{ext}");
}
.class#{i}:hover {
background-image: url("#{url}#{i}#{hover}#{ext}");
}
.generate-images(#n, (#i + 1));
}
Demo
Try before buy
It seems that you could define a CSS rule for each class that you need.
Perhaps the following may be helpful.
.willhover.class1 {
color: blue;
}
.willhover.class2 {
color: green;
}
.willhover.class1:hover {
background-color: yellow;
}
.willhover.class2:hover {
background-color: beige;
}
<div class="willhover class1">Class 1</div>
<div class="willhover class2">Class 2</div>
However, you still need to create specific two types of CSS rules, one for pointing to the non-hover image and the other pointing to the hover image.
The problem that I've got is quite simple. I want to use a css class name that has been previously defined as a mixin.
I'm currently using Bootstrap, which has defined a mixin called "placeholder", and because of backwards compatibility we're planning to use the jQuery placeholder plugin to support placeholders for IE 9. The problem is that this plugin adds the css class "placeholder" to the DOM element.
How do I define the css class "placeholder" in my LESS file without executing the mixin previously defined in Bootstrap?
This should not be a problem. This is bootstrap's placeholder mixin
// Placeholder text
.placeholder(#color: #input-color-placeholder) {
&:-moz-placeholder { color: #color; } // Firefox 4-18
&::-moz-placeholder { color: #color; // Firefox 19+
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: #color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: #color; } // Safari and Chrome
}
This is not a mixin class, as it has parenthesis after it. Therfore it will not output anything unless it is referenced. To use this I would need to do something like this.
.input {
.placeholder;
}
Therefore this will not interfere with any .placeholder class you may have.
.placeholder {
color: red;
}
The two should happily co-exist and you should not get any problems.
Edit: see comments
The solution was to use multi class selector to overcome the issue.
Example
.input.placeholder {
color: red;
}