I have mixins for red button
e.g.
.btnRed{
background:red;
color:white;
border-radius:3px;
min-width:200px;
font-size:18px;
}
I use it to style my main buttons , but for one I overwrite min-width and font-size:
.class1{
.btnRed;
min-width:0;
font-size:25px;
}
When I check it in firebug I get this result:
.class1{
background:red;
color:white;
border-radius:3px;
min-width:200px;
font-size:18px
}
.class1{
min-width:0;
font-size:25px;
}
and added styles are ignored.
So my question is:
how can I combine mixins and new added styles in one class1 and make added styles important without declaring !important.
I've tested your LESS and all seems to be fine.
When applying class1 on elements I've got the overridden values.
See this working example.
So my guess would be that your problem lies somewhere else
Related
I have the following problem:
I have a font with a given style in a css class:
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
And now I have a css that gives me the size of a div in a given situation:
.a_div_test {
width:300px;
max-width:350px;
}
I want the a_div_test to have the properties of the font_arial_36, like an inheritance.
Somethin like (this is wrong just posting what I wanted):
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}
and now the .a_div_test should also have the font_arial_36 properties.
Is it possible with css?
PS: I do not want to add multiple classes to an Html Element like that:
<div class="font_arial_36 a_div_test"></div>
Because I should rewrite my code in many places where .a_div_test appear.
This is not possible in CSS. What you do is you assign the 2 classes to the element you want.
<div class="font_arial_36 a_div_test"></div>
CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.
That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.
That is, the inheritance is defined by the HTML structure, not the CSS itself.
why you need to extend when you can add multiple classes with space on HTML element.
<div class="font_arial_36 a_div_test">Like this</div>
As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:
<button class="uiButton disabledButton">Click Here</button>
For below CSS:
.uiButton {
background-color: gray;
color: lightgray;
font-size: 20px;
font-family: "Segoe UI", Helvetica, sans-serif;
text-align: center;
text-decoration: none;
padding: 10px 10px;
border:none;
display: inline-block;
margin: 5px 5px;
cursor: pointer;
}
.disabledButton
{
background-color: gray;
color: lightgray;
cursor: not-allowed;
}
In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).
But, there is a better way:
Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide
Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).
if you don't want to add multiple classes to html element then
.font_arial_36, .a_div_test {
font-family:Arial;
font-size:36px;
}
.a_div_test {
width:300px;
max-width:350px;
}
other than this no other possible way seems to be there for inheritance in css, we have to use sass
Based on another thread I have here: JQueryUI Accordion: Headers and an inline block for arranging image/text
I have the CSS below, which works fine for one accordion, however when I want to use multiple accordions, which I simply name #accordion2 etc. Is there a quicker way to assign those to this CSS without having to copy/paste it multiple times for each accordion?
I tried:
#accordion #accordion2 .foobar {
etc. but apparently that's not it.
Apologies for such a simple question!
#accordion .foobar {
margin:0px;
padding:0px;
}
#accordion .foobar .foo {
display:inline-block;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
}
#accordion .foobar .bar {
display:inline-block;
width:290px; /* enlarge this value, if you want text all on one line */
}
replace:
#accordion #accordion2 .foobar {
with:
#accordion, #accordion2, .foobar {
I have a browser extension that adds a div element (and others) to the page. Is there a way to make sure that the page styles don't affect the styles within my added element?
I've considered making it an iframe, but would prefer not to make the extra call. Making sure to overwrite every single possible style also seems a bit much, although my added information is just basic text and links.
I noticed you said you'd prefer not to use every style but I figured I should mention it here in case it helps someone else. Basically this is a class that can remove most inherited/predefined attributes. You can just add the class to any element you would want to exclude. Here is an example:
.reset {
background:none;
border:none;
bottom:auto;
clear:none;
cursor:default;
float:none;
font-size:medium;
font-style:normal;
font-weight:normal;
height:auto;
left:auto;
letter-spacing:normal;
line-height:normal;
max-height:none;
max-width:none;
min-height:0;
min-width:0;
overflow:visible;
position:static;
right:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
top:auto;
visibility:visible;
white-space:normal;
width:auto;
z-index:auto;
}
Now just add "reset" and it should set it back to normal. You can then define styles below that line and they will override the styles in the reset class.
You could also add a wildcard selector to the reset class so that is targets the element's children as well.
.reset,
.reset * { /*...etc */ }
NOTE: Wildcards are supported by IE8+, so if you are working on IE7 or lower - no dice.
I currently use these:
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
Codes from a .css file called layout.css, I use them for my navigation bar.
Now I have a link which I don't want to use the .css for, I need to do something with classes I think, but can't get it to work.
I tried doing:
a.not
{
/*nothing*/
}
And then putting class="not" inside the link tag, but the link still uses the same style as the menu instead of the standard blue link.
I am not good with .css, so that must be why I can't get it to work.
Does anyone know how to solve this?
Thanks in advance!
You can use the :not() selector.
a:link:not(.not), a:visited:not(.not)
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover:not(.not),a:active:not(.not)
{
background-color:#7A991A;
}
This
a.not
{
/*nothing*/
}
does not overwrite previously set styles.
Rather, you must reset the values yourself. And that's a tedious process. Another approach is to use a basic style for all a elements, then create two classes that style any non-basic a elements accordingly.
It is working when i apply it as inline style.
<div id="footer">#Copyright 2012</div>
#footer
{
background-color:Black;
color:Silver;
width:100%;
text-align:center;
position:absolute;
bottom:0;
}
Look with Firebug which style is winning over your.
Please note that the order of declaration of your CSSs in your page matters, last win.
So you probably have another #footer rule in another stylesheet loaded after your.