does anybody know a way or a tool how inheritance can be used in CSS independent of the structure of the elements?
Example:
.bg_red {
background: red;
}
.bold {
font-weight: bold;
}
.bg_red_and_bold {
//this class should inherit all the properties of the above two classes
}
I hope it is clear what I mean...
Thanks
There is no way you can do that in CSS, but since you are looking for tools as well, you might look into CSS preprocessing:
LESS
SASS
Their mixin and #extend features should do what you are looking for.
ability to add multiple classes to element is there for exactly that reason.
<div class="bg_red bold">The red and bold text</div>
There is no such thing in CSS. Only thing you can do is:
.bg_red, .bg_red_and_bold {
background: red;
}
.bold, .bg_red_and_bold {
font-weight: bold;
}
CSS does not support this.
Consider using LESS, which compiles to CSS and supports mixins:
.bg_red_and_bold {
.bg_red();
.bold();
}
Probably not what you want but there is aggregation:
<div class="bg_red bold"...
The div will "inherit" characteristics of both styles.
Related
With the LESS preprocessor, you can nest CSS code inside other CSS code, like this:
.Element {
.AnotherElement {
background-color: #FFF;
}
.YetAnotherElement {
background-color: #000;
}
}
This would make the background of .Element .AnotherElement white, and it makes .Element .YetAnotherElement have a background color of black. It does it all without writing it out like:
.Element .AnotherElement {
background-color: #FFF;
}
.Element .YetAnotherElement {
background-color: #000;
}
Does the first example coincide with CSS syntax, or do I have to use the LESS preprocessor?
Nesting is a feature of LESS and SASS, not native to CSS.
This is one of the most common uses for CSS preprocessors, but they offer a lot more too.
No, css doesn't support this syntax, in your css example the "Element" and "AnotherElement" will to receive this properties, AnotherElement will not inherit properties of Element.
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.
This question may be foolish, though I want to know from experts in CSS. Is there a way to write CSS classes under one class.
Suppose I have a few divs under a div
<div class="parent">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
Normally, we write css classes like below-
.parent { width: 100%; }
.parent .c1 { //somecode }
.parent .c2 { //somecode }
.parent .c3 { //somecode }
But, I want to know. Can we write like below-
.parent {
width: 100%;
.c1 {
//somecode
}
.c2 {
//somecode
}
.c3 {
//somecode
}
}
Please let me know the answer on my curiosity. Thanks you.
You can't using normal css.
Maybe you are looking for less? Specifically the Nested Rules section further down the page.
This allows you to do what you are asking, along with many other useful functions, variables and mixins.
Alternatively there is the option of SASS. Which is very similar to less.
CSS can't do that, but LESS and SASS can.
Take note these are CSS compilers, so they'll need a compile step and generate the needed CSS for you (instead of you writing everything by hand).
Sounds like you are looking for something similar to nesting or selector Inheritance.
This can be done with SASS. Very similar to LESS. http://sass-lang.com/
no you cant using normal css, but for readability purposes, and if you aren't going to use .c1-3 in anything other than a parent class then you could just indent your CSS and do
.parent {
width: 100%;
}
.c1 {
//somecode
}
.c2 {
//somecode
}
.c3 {
//somecode
}
in this way you can easily see in your code which classes belong to which parent classes. (if you don't want to go down the LESS SASS route
I thought that it was possible, but everyone tells me it's not.
I want context styling in my css file like:
div#foo {
h2 {
color: #F42
}
p.bar {
font-size: 12px
}
}
So that only h2 and p.bar in the div with id foo will be styled. Or is this only possible with LESS and other similar libs?
Thanks & kind regards,
Jurik
This is not possible with standard css, the 2 classes would need to be set like:
div#foo h2 {}
div#foo p.bar {}
This is not possible with pure CSS, that's why you should use SCSS or LESS (i suggest to use SASS/SCSS), which are CSS supersets
LESS/SASS-SCSS allows you to write dynamic CSS with ease, take a look at this comparision
check out COMPASS which is the main reason why I suggest you SASS/SCSS
It's possible, but as follows:
div#foo h2 {
/* styles go here */
}
div#foo p.bar {
/* styles go here */
}
What you have above is just a slightly altered version of:
div#foo h2 { color: #F42; }
div#foo p.bar { font-size: 12px }
I don't really see any gain to it.
Less let's you do pretty much what you described, as well as some other cool stuff like use variables in css etc.
Of course, once you let it compile, it'll just turn it into the valid CSS that has been suggested in the previous answers. Still worth a look IMHO.
yes but separated...
div#foo h2 {
color: #F42
}
div#foo p.bar {
font-size: 12px
}
but I would like too change a bit:
#foo h2 {
color: #F42
}
#foo p.bar {
font-size: 12px
}
you are using an ID so you don't need to say nothing before because ID's are unique
Its not possible using default CSS techniques.
But, by using sass and less however, it is possible.
The code in your question, works in both of the libraries above.
I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars