This question already has answers here:
Does the order of classes listed on an item affect the CSS?
(5 answers)
Closed 2 years ago.
Is there a rule in CSS that determines the cascading order when multiple classes are defined on an element? (class="one two" vs class="two one")
Right now, there seems to be no such effect.
Example: both divs are orange in color on Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
</style>
</head>
<body>
<div class="one two">
hello world
</div>
<div class="two one">
hello world
</div>
It depends on which one is declared last in your stylesheet. For example,
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
vs
.two { border: 6px dashed green }
.one { border: 6px dashed orange }
The class defined last in the CSS is what wins in these cases. The order on the element doesn't matter, this is consistent across all browsers that I'm aware of, I'll try and ind the relevant spec bits.
The entire class doesn't win, the properties individually win, if the .one had a property that .two didn't you would of course see that property on both of these <div> elements.
As the other answers have noted, the order declared in the class attribute has no effect - the priority comes from the order of declarations in the CSS file.
However, if you really want to mock up something that allows you to "fake" priority in the class attribute, you could try:
.one-first { border: 6px dashed green }
.two-first { border: 6px dashed orange }
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
And then
<div class="one-first two"/>
and
<div class="two-first one"/>
Will order the priority with the last one winning (in a similar vein to the CSS proprty that comes last taking priority.)
The order of the class attribute doesn't matter one bit. It depends on several things, in your case it's the order in which your css is written.
Both styles have the same specificity, so the .two style overrides the style of .one because it's lower in the style tag.
When using multiple classes for defining an element stylesheet you can use the !important to override the "cascating" of stylesheet.
.one { border: 6px dashed green !important }
.two { border: 6px dashed orange }
It will make your divs green.
I think it's clear that no such rule applies. The rule .one has the same specificity as the rule .two, so according to the CSS standard the properties in the .two block override those in the .one because the .two block appears later. No reference is made anywhere to the order of the words in the class attribute.
the override will happen in the order in which the classes are declared. so .two always wins
When in doubt, view the page in FireBug. It will strike out the classes that are overridden and show the order which they are applied in the page.
Also note that inline styles will override those declared in an external stylesheet. If you want to break the cascading chain af applicability, you can use the !important declaration as in
p {margin: 10px 5px 0 10px !important}
This will cause the !important declration to override others regardless of position. Some see it as bad practice, but it can come in handy if used judiciously.
Related
Is there are global way to deactivate the focus color? As you can see in the attachment?
Thanks in advance!
Best Regards,
Thomas
That border is the "focus ring" (it's an accessibility feature that indicates that the field has received focus from a keyboard interaction, but it won't display when focusing the field by using the mouse).
How the focus-ring is styled, depends on each component and theme.
For instance, the focus-ring of TextField in Lumo is a CSS box-shadow in the input-field part:
:host([focus-ring]) [part="input-field"] {
box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
}
:host([invalid][focus-ring]) [part="input-field"] {
box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
}
A handy way to find those styles is inspecting the <style> tag in the component's shadow DOM
You can override the focus-ring of vaadin-text-field with
:host([focus-ring]) [part="input-field"] {
box-shadow: none !important
}
Then, you import the stylesheet with a #CssImport with themeFor="vaadin-text-field" or by means of registerStyles.
If you click this link it takes you to a few examples on their page.
https://ng.ant.design/components/button/en
I am able to access the buttons and change the color but not the actual blue border. I have tried :active, :hover, :focus, etc..
This is how I access the button for some custom css
.ant-btn-circle {
background-color: $theme-foreground !important;
color: rgb(var(--MainColor)) !important;
}
.ant-btn-circle:focus {
background-color: rgb(var(--MainColor)) !important;
color: $theme-foreground !important;
outline: 0 !important;
}
The outline portion doesn't seem to work... Any tips?
I see something like this that has the blue color but I dont know what it is. --antd-wave-shadow-color
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
--antd-wave-shadow-color: #1890ff;
}
Only solution I found so far is creating a theme.less file in your src and adding this:
#import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
#primary-color: #6D6E70;
So I guess it is the primary color. Would be nice to set it custom. In the css.
I managed to resolve this by setting the transition period for the button's border-color property to 0ms.
So using your example:
.ant-btn-circle {
transition: border-color 0ms;
}
In Qt Designer, I've set a default print/preview stylesheet in the Preferences, to match the stylesheet of the application that will contain my UIs. When previewing, all of the contained widgets are styled correctly, but my top-level form isn't. Why? And what can I do?
For example, using this stylesheet:
MyFormBase
{ background: black; color: white; }
QLabel
{ background: transparent; color: yellow; }
and a UI structure like
MyForm form (subclass of MyFormBase)
QLabel label
The label has yellow text, but it's displayed on Designer's default (grey) background.
When the Designer creates a preview, it constructs a plain QWidget as the top level window. So any style applied using the class name of the top-level form doesn't match.
Examination of Designer's internals shows that it applies a property to mark the top-level window; we can select using that to style the top-level form:
[_q_custom_style_disabled="true"], /* for preview in Designer */
MyFormBase
{ background: black; color: white; }
QLabel
{ background: transparent; color: yellow; }
Note that the _q_custom_style_disabled property is not a documented feature of Designer, so it may be subject to change without warning.
If you have many selectors that depend on top widget (e.g. if you have MyFormBase > QLabel), or if you're concerned about the hack above, you might want to apply a custom property:
[role~=Page"]
{ background: black; color: white; }
[role~=Page"] > QLabel
{ background: transparent; color: yellow; }
Obviously, you then have to remember to apply the property to the topmost widget on each of your forms!
I have a problem formatting toplevel-nodes in a Vaadin-Tree. I understand using the ItemStyleGenerator to set ccs-Style for particular nodes. I did this with following code:
this.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
#Override
public String getStyle(Tree source, Object itemId) {
if (source.isRoot(itemId)) {
return "toplevel";
} else {
return null;
}
}
});
The CSS is as follows:
.v-tree-node-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
And the result is, that the root-node and all its child nodes have the same background-color and the border is around the toplevel- and all its child-nodes and the node icon is missing
My goal is to format just the root-node.
When i set the toplevel-style to a child node it is formatted as expected.
Can somebody help? Thanks.
Bernhard
Change your CSS to this:
.v-tree-node-caption-toplevel {
border: 1px solid #d8d9d9;
background: #fff;
#include border-radius(6px);
}
If you only want to style behind the text, and not the whole width of the tree, use this:
.v-tree-node-caption-toplevel span {
CSS stuff...
}
(The text part of the caption is contained within a span inside the v-tree-node-caption element.)
Here's a (not very detailed) explanation of what's occurring:
An expanded node inside a Vaadin tree (with children) is actually made up of about 3 distinct divs. First you have the container div, which is v-tree-node. Then you have the v-tree-node-caption which is an inner div that contains the name and icon of the node, this is probably what you want to style. Last, there is v-tree-node-children which contains all the child nodes underneath. The ItemStyleGenerator not only applies your style to the v-tree-node, but the v-tree-node-caption and v-tree-node-children as well.
This is basically how your HTML will look when you apply the toplevel style to an item:
<div class="v-tree-node v-tree-node-toplevel">
<div class="v-tree-node-caption v-tree-node-caption-toplevel">
node1, the best node!
</div> //end of caption
<div class="v-tree-node-children v-tree-node-children-toplevel">
...
Other divs (child nodes)
...
</div> //end of children
</div> // end of node
You were losing the arrow icon because it's the background image of the v-tree-node. Each v-tree-node (where canHaveChildren() == true) has a background style (transparent, with the arrow image).
.v-tree-node {
url("../reindeer/tree/img/arrows.png") no-repeat scroll 6px -10px transparent;
}
If you override the background style on a v-tree-node, you will lose the image (the arrow). What you could do instead is to use the background-color style to only override the transparent part, but as I pointed out earlier, the v-tree-node element contains both the caption and children elements, so your background color will be visible behind any child nodes (and slightly to the left, even if you style the background-color of the child node).
I build my first phonegap Jquery Appl
Im changing my icon using this class
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
This custom icon is for a list view , and i try to remove the round grey background load
Also my picture is a bit big for the shape
I was playing with the .ui-icon but doesnt work
Cant find the class
I just wanna my custom arrow picture full size on a white background list no round no circle box shape
Maybe there is an attribute or via css to make that
thanks
If you are using jQuery v 1.4.0 + then you just need to add the class .ui-nodisc-icon to your link element to remove that annoying circle. You will not need to edit any css or write any overrides.
Late to the party here, but a simple answer is to add
background-color: transparent;
box-shadow: none;
to your custom class name, so:
.ui-icon-myapp-email {
background-color: transparent;
box-shadow: none;
}
is all you need.
With JQuery Mobile 1.3, now all you have to do is add the class "ui-nodisc-icon", no need to mess around with the CSS.
from JQuery Website:
"If you don’t need the dark circle behind the icons, simply add the ui-nodisc-icon to the element or its container to remove the icon background."
This should work.
.ui-icon-myapp-email {
background:transparent; /* or none */
background-image: url("app-icon-email.png");
/* The following border radius rules will override the circle around your icon */
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
/* To fix the size issue override the .ui-icon height */
.ui-icon{
width:14px;
height:20px;
}
Overrides the icon disc color to white.
.ui-icon,
.ui-icon-searchfield:after {
background: #fff /*{global-icon-color}*/;
background: rgba(255,255,255,1) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Icon size is specified in ui-icon class which defaults to 18px.
.ui-icon {
width: 19px;
height: 19px;
}
For those of you looking to have just an icon for the button - I found this article to be very useful! I followed the "Reset the button theme" and "Icon-only buttons" sections to get the effect that I needed.
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I solved this issue, using:
background-color:transparent;
if you want to add color in background you can use:
background: url(yourimage.png) repeat;