Is it possible to use existing css class as content in another class ?
I mean something like:
/* Contained in some library: */
.class1 { text-indent: 100 }
/* I can not change this: */
<span class="class2">
The definition for class2 is also contained in another library. So I can not change it directly.
/* But I want to do something like that in my CSS file: */
.class2 { .class1 }
I know it is not possible in that form. But maybe one can use some trick to achieve the behaviour without copying of the content of class1? I need this because I want to redefine class with content from another CSS class. Our project uses jQuery as well, but I would do it rather with CSS.
EDIT: I should explain more, I could not change how .class1 is defined, because this class is in a library, and I could not change mark up on span class.
It is imposible to do in standard CSS what you are commenting, as there is not pure inheritance.
Despite it doesn't apply with your code restrictions, this is the closer way to do it:
.class1, .class2 { text-indent: 100 }
.class2 {
/* Styles you want to have only in class 2 */
}
<span class="class2" />
On the other hand, as #A. Wolff has pointed out, you can still use js/jq to add class to specific elements: $(function(){$('.class2').addClass('class1')}); Then just set a specifc CSS rule for these elements.
In case you don't want to use JS, for something like that you'd need to use SASS or similar, which "compiles" to CSS.
CSS has no means to reference one rule-set from another.
Your options include:
Using multiple selectors for things with common rules
.menu,
.nav {
font-weight: bold;
}
.nav {
display: inline-block;
}
Using multiple classes on a single element
.menu {
font-weight: bold;
}
.nav {
display: inline-block;
}
<li class="menu nav">
Generating your CSS programatically
For example, with SASS
#mixin menu {
font-weight: bold;
}
.nav {
display: inline-block;
#include menu;
}
Yes, it is possoble.
Write:
.class1,.class2 {text-indent:100;}
.class1{color:red;}
.class2{font-size:30px;}
More info here.
Another option is to use LESS to do this. It's a very good tool and do some improvements to your CSS development.
Take a look at theirs documentation, it's very nice. About the compilers, I use Koala and recommend it.
You mentioned in one comment that you cannot use LESS, but I think perhaps you misunderstand how LESS (or another preprocessor) could help you. That is, you have not given any reason that I can see why you cannot use it (even in your update). As I understand your problem, you have the following parameters:
Cannot change html
Cannot change the css file that defines .class1.
You can change the css file that defines .class2.
If the above is correct, then here is how you use LESS (version 1.5+). You make your file defining .class2 a .less file. Then, to keep it clean, I believe you are going to have to do a two step process (it may be you can do step 2 without step 1).
Step One: Make the CSS into LESS
Create a file, let's say CSStoLESS.less and put this in it:
#import (less) /path/to/your/your-css-defining-class1.css;
This will import the css and make the processor consider it as LESS code. It is possible that the next step does that as well, I have not had opportunity to test it out.
Step Two: Use that file as reference in your LESS
By doing this in your .less file defining .class2:
#import (reference) /path/to/your/CSStoLESS.less;
.class2 { .class1; }
You are importing the previous css file that has been converted to less as reference only. This prevents you from getting duplicate selectors for .class1 or anything else contained in your original css file. Now you can use an inclusion of .class1 just like you show in your question to make the properties of .class1 become that of .class2.
It may be that this alone works:
#import (reference) /path/to/your/your-css-defining-class1.css;
.class2 { .class1; }
What I don't know is if the (reference) inclusion also defaults to making .css into LESS code like the (less) inclusion typecasting does in step one. I need to research this out more. If so, then it is a one-step, not a two-step process.
The best way would be to redeclare class1 just below your custom css ends and override it with the values that you are looking for. This way, the inherited values, that you cannot change + the values that you need to incorporate, both shall apply.
I am assuming you want whatever is in .class1 plus some extra properties in .class2
One way is to simply apply both classes to the element you want..
<span class="class1 class2" />
another is to name both classes when setting the properties
.class1, .class2 {text-indent: 100}
.class2{/*extra properties here*/}
You can define 2 classes in this way
.class1, .class2 { text-indent: 100 }
And it will work for you
Moreover if you want to ad some more in class2 then you can define it
.class2 { /*whatever you want here*/ }
Others mentioned SASS and LESS. Here's the solution of Stylus:
.class1
text-indent: 100
.class2
#extend .class1
Related
I'm new in CSS and I have a question about blocks (actually I don't know how do we name the 'blocks' like #my-id{color: yellow} so if you can also answer that it would be great)
So, I wanted to know if it was possible to specifie how will type of a class comport, it would look like this:
.my-class{
h1{
color: yellow;
}
p{
color: blue;
}
}
I hope you understood what I want to explain, so please answer my two questions!!!
Technically, yes, but not when both blocks are rule sets. (e.g. you can put a rule set inside a media query).
Some other languages, such as SCSS, which can be transpiled to CSS, allow you to do that, but in CSS it is just invalid.
I want to have a CSS selector for a header with custom font, color and a bullet to the left. So I want my header to use my custom font, and it's :before pseudo-element to use font-awesome. So I would like my :before to have the .fa class, while the whole element doesn't have this class.
I have this html: <h1 class="bulleted-header">Hello</h1> And I would like to write something like this in LESS:
.bulleted-header {
color: #61cbe6;
font: 16px 'ds_goose', sans-serif;
&:before {
content: #fa-var-bullseye; // font-awesome's bullet icon
.fa; // calling font-awesome's class. DOESN'T COMPILE
}
}
The problem is that .fa class is declared like this in font-awesome LESS sources: .#{fa-css-prefix} { ... }, so the code above doesn't compile. I tried to reuse the .fa code like this:
&:before {
content: #fa-var-bullseye; // font-awesome's bullet icon
.#{fa-css-prefix}; // DOESN'T COMPILE
}
and like this:
&:before:extend(.#{fa-css-prefix}) { // compiles but no effect
content: #fa-var-bullseye; // font-awesome's bullet icon
}
I know I can just change my html like this <h1 class="bulleted-header"><span class = "fa fa-bullseye"></span>Hello</h1> and not to use :before at all, but it's more logical to keep all this bullets thing in CSS.
I ended up just copy-pasting the content of .fa into my :before, but there is something wrong in this approach because now I have to maintain this code myself in case FA guys change something. Are there any more elegant solutions?
You can not really use interpolated selectors for mixins in Less ... so the rules with interpolated selectors can not be included in other rulesets. See answer here:
LESS mixin a variable class name
But in your case you could just import the compiled css as less instead of the less files, if you are not doing any other special stuff with these less files. Simply by using:
#import (less) 'font-awesome.css';
Then you can use .fa as a mixin, exactly like you wanted.
However, this way you don't import the character variables, which you could do separately, but instead you could also just use content: "\f140"; directly (the way it's used in .fa-bullseye:before)
Or alternatively just extend the selectors imported from font-awesome.css with your selector, like so:
.bulleted-header {
color: #61cbe6;
font: 16px 'ds_goose', sans-serif;
&:extend(.fa, .fa-bullseye all);
}
Hope this helps.
Update:
As of LESS >= 1.6 rules with interpolated selectors can be accessed as mixins. So calling .fa as a mixin, like you do in your above example, should now work perfectly.
I had the same problem using the SASS-implementation. I changed the .#{fa-css-prefix} code so it does .#{fa-css-prefix}:before and this worked pretty fine for me. You still have to extend your base element then, but the font-style is only applied to the :before
I actually wondered why they did it like that. I think their approach was that you have single dom elements for every icon (like the <i> they use) and no icon in front of a button, link, list item or whatever as you would usually do it. But as far as I remember this was the case in the last fontawesome version.
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
Here's a simple example of what I'm looking to do.
I want to define a css rule for a 2 gradient backgrounds - blueGradient and greenGradient.
I want all elements with css class foo to have the blueGradient rule, and on hover have the greenGradient rules.
So, here's how I want my HTML to look:
<div class="foo">Hello</div>
This should have a blue gradient normally, and green when I hover on it.
Ideally, I want my CSS to look like this (I know it's not legal):
.blueGradient {
...
}
.greenGradient {
...
}
.foo {
<#include blueGradient>
}
.foo:hover {
<#include greenGradient>
}
What's the best way to achieve this?
If something like this isn't possible, what's the best way to achieve this without having several copies of the blue/greenGradient definitions all over my CSS rules?
I know I can change my HTML to look like this:
<div class="foo blueGradient">Hello</div>
But then, how do I deal with the hover (I don't want to use JS)?
For rules that you want to apply to more than one selector, just separate them by commas:
.blueGradient, .foo {
/** blue gradient styling **/
}
.greenGradient, .foo:hover {
/** green gradient styling **/
}
In the same CSS file (and, indeed, in different files if you like) you can define styles for the same selector as many times as you like, so you can also define .foo and .foo:hover styling that will only be applied to these selectors, and will not shared with other .blueGradient and .greenGradient elements:
.foo {
/** foo-specific rules **/
}
.foo:hover {
/** foo:hover-specific rules **/
}
This does not require you to change your html. Where the same attribute is defined in both entries with different rules (e.g. margin: 0; and then later margin: 10px;) the last entry takes precedence.
If you also want the blueGradient styles to be applied to yet another selector .bar, just add it to the chain:
.blueGradient, .foo, .bar {
/** blue gradient styling **/
}
(Note in the example above, the .blueGradient and .greenGradient selectors are not required, unless they are being used elsewhere. You could replace them instead with a code comment that stated this was where the gradients were being applied if you wished.)
Using just CSS, the best way to accomplish this with minimal repetition of code is to do something like the following:
.blueGradient, .foo {
...
}
.greenGradient, .foo:hover {
...
}
Using a comma in your selector allows you to assign a block of CSS to multiple elements/IDs/classes at once.
You can't quite do what you're proposing in plain CSS. You might looking to using LessCSS. It has a feature called Mixins:
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
I know that's JS, but it wouldn't require you yo learn JS, just stick it on the page.
Otherwise you're stuck with what Justin Michael and others have said. Which is certainly good enough for most cases. Part of what you may need to do here is to train yourself to think in CSS rules.
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.