So I am providing the resources for my celllist via the constructor. Everything seems to work, I have provided my own style sheet:
.cellListWidget {
color: #021650;
background-color: #021650;
}
.cellListEvenItem {
cursor: pointer;
zoom: 1;
background: red;
}
.cellListOddItem {
cursor: pointer;
zoom: 1;
background: blue;
}
.cellListKeyboardSelectedItem {
background: #ffc;
}
.cellListSelectedItem {
background-color: green;
color: white;
height: auto;
overflow: visible;
}
I must not understand it quite right because the background color I tried to set for the widget does not seem to take any effect. The rest of the styles work though, even item, odd item, selected item, etc.
Just to clarify, I want to change the color of the whole column this list is on, it items in the list are obviously styled, but the list takes up more vertical space than there are items, so where there are no items, is just a grey color which I want to change.
The solution I found was to not style the cell list, but the flowpanel that the cell list was on.
Related
I have a .card class with a CSS variable that has a white background color: --card-bg: #fff; and .card { background-color: var(-card-bg); }.
When you use the class in a div it will have the background color white but if you have a child with the same class .card the idea is to change the color to --card-bg: #f9f9f9;. Then if another div is put inside these two I want to change it back to white. The intention is for the .card class to change the background color between #fff and #f9f9f9 depending on the parent. Could someone help me with that please?
Obviously, you cannot have 2 distinct values of the same variable at the same time. The solution would be to use two variables:
--card-bg: #fff;
--card-bg-alt: #f9f9f9;
.card { background-color: var(--card-bg); }
.card .card { background-color: var(--card-bg-alt); }
.card .card .card { background-color: var(--card-bg); }
/* ...and so on... */
I know there are a ton of answers on :hover effecting other classes. What I'm trying to do is change the font color of itself (.footer_status_tex) and background-color of another class (.footer_status_gear)
Simplified CSS - Something like this:
CSS
.footer_status_tex {
cursor: pointer;
color: #fff;
}
.footer_status_gear {
width: 36px;
height: 36px;
background-color: #000;
}
.footer_status_tex: hover {
color: #81aaf3;
}
.footer_status_tex:hover .footer_status_gear {
background-color: #aba51e;
}
HTML
<div class="footer_status_tex" style="">Hello</div>
<div class="footer_status_gear"></div>
Current setup only changes font color.
Thanks
First, you need to fix the selector .footer_status_tex: hover, remove the gap after :.
Second, the selector .footer_status_tex:hover .footer_status_gear only works if the latter one is a child of the former one.
What you need is .footer_status_tex:hover + .footer_status_gear or ~ if the latter one is a sibling of the former one, also the latter one must be placed next to the former one in the DOM.
.footer_status_tex:hover {
color: #81aaf3;
}
.footer_status_tex:hover + .footer_status_gear {
background-color: #aba51e;
height: 20px;
}
<div class="footer_status_tex">Hello</div>
<div class="footer_status_gear"></div>
You can use ~ adjacent selector to target the adjacent elements
Stack Snippet
.footer_status_tex {
cursor: pointer;
color: #fff;
}
.footer_status_gear {
width: 36px;
height: 36px;
background-color: #000;
}
.footer_status_tex:hover {
color: #81aaf3;
}
.footer_status_tex:hover ~ .footer_status_gear {
background-color: #aba51e;
}
<div class="footer_status_tex" style="">Hello</div>
<div class="footer_status_gear"></div>
When posting CSS problems, please also include the associated HTML code as without it, we're can only assess half the problem.
I'm assuming this is your structure: https://codepen.io/barrymcgee/pen/vdGOra?editors=1100#
The reason why the background of .footer_status_gear doesn't change is because it's the parent element of the link. A :hover pseudo-class can only direct the children of the element to which it is applied.
If the assumption I made about your HTML structure is wrong, please provide it and I'll look again.
If I have a blue div that someone else owns the code for
.stuff {
background-color: blue;
}
And I want it to be red on hover
.stuff:hover {
background-color: red;
}
But then I want to be able to add a class for it to go back to its non-pseudo-class state:
.stuff.otherclass:hover {
background-color: unset; /* Want blue in this case */
}
Is there a CSS option of going back to a pre-pseudo-class state?
Codepen demo:
http://codepen.io/anon/pen/EyEWww
The only way to roll back the cascade is using the revert keyword, but it rolls back to another origin.
There is no way to make the 2nd value in the output of the cascade become the cascaded value, ignoring the winner.
Instead, you can modify your selector and use the :not() pseudo class:
.stuff {
background-color: blue;
}
.stuff:not(.otherclass):hover {
background-color: red;
}
Or, alternatively, take advantage of .stuff.otherclass:hover having more specificity than .stuff:hover
.stuff, .stuff.otherclass:hover {
background-color: blue;
}
.stuff:hover {
background-color: red;
}
In my Vaadin App I want to change the color of a focused TextField, which is no problem. Additionaly I want to change the color of the caption which belongs to the TextField. How can I achieve this with css?
.v-textfield.textfield-default {
border: none;
border-bottom: 1px solid $non-active-field;
outline: none;
height: 3rem;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
}
.v-textfield.textfield-default:focus {
border-bottom: 1px solid $default;
}
.v-caption-default-caption {
color: purple; //changes the text to purple
top: 0.8rem;
left: 0.75rem;
font-size: 1rem;
cursor: text;
transition: .2s ease-out;
}
.v-caption-default-caption:focus {
color: red; //is never called
}
.v-caption-default-caption:active {
color: blue; //is never called either
}
Note: I'm not a CSS/SCSS guru thus more elegant solutions may exist that I'm unaware of. The only one I could come up is Vaadin-based (also java 8), but corrections and suggestions are more than welcome.
From what I gathered, the problem in this case is that you need to update the previous sibling of the input that gets focused, aka it's caption. I've done a bit of research and so far it does not seem possible with CSS.
Also looking at the DOM (see image below), only the text-field gets foucused, hence none of the styles you've defined for the caption gets applied. Under the circumstances, a quick workaround that you can use, is to add focus & blur listeners to your text-fields, which will add & remove a custom style you're also going to define.
Step 1: The component
public class MyTextFieldsComponent extends VerticalLayout {
public MyTextFieldsComponent() {
// the text-fields
TextField myFirstField = new TextField("My first caption");
TextField mySecondField = new TextField("My second caption");
// when focused, add our custom style
FieldEvents.FocusListener focusListener = event -> event.getComponent().addStyleName("red-caption");
// when blurred, remove the custom style
FieldEvents.BlurListener blurListener = event -> event.getComponent().removeStyleName("red-caption");
// use the above listeners
myFirstField.addFocusListener(focusListener);
mySecondField.addFocusListener(focusListener);
myFirstField.addBlurListener(blurListener);
mySecondField.addBlurListener(blurListener);
// add the text-fields to the UI
addComponent(myFirstField);
addComponent(mySecondField);
}
}
Step 2: The style
.v-caption-red-caption {
color: red;
}
Step 3: The result
I have following html:
<div class="red placeholder"></div>
<div class="blue placeholder"></div>
<div class="green placeholder"></div>
and CSS:
.placeholder {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
.placeholder:hover {
background-color: gray;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
I should not change initial placeholder declaration(s) and I don't want DIVs to change colour on hover.
Is there any way I can override placeholder class to "cancel" or turn off that hover property?
jsFiddle: http://jsfiddle.net/8QJEq/4/
That was really a good question, since am not able to work out any easier way than this, you can check out my solution
div[class="red placeholder"]:hover {
background-color: red;
}
div[class="blue placeholder"]:hover {
background-color: blue;
}
div[class="green placeholder"]:hover {
background-color: green;
}
Demo
Explanation: What we are doing here is, we are selecting the elements having a combination of 2 classes, and than we use the same color on hover, which is their default background-color, so inshort, this won't take out the hover, it does hover, but because of the same background color, you won't see any change.
I would recommend to avoid targeting the elements in the first place if at all possible.
If that's not possible, you could just declare the hover state with each color. As long as .color:hover is declared after .placeholder:hover it will override it since they share the same specificity.
jsfiddle 1
CSS
.color, .color:hover { background-color: color; }
Though I wouldn't recommend it, but it sounds like you don't want divs with color classes to not change background-color you could also just declare the rules as !important. But this would only be a last resort option since you wouldn't be able to easily override the background-color again.
jsfiddle 2
CSS
.color { background-color: color !important; }