I have tried to combine to classes in CSS, but I end up failing. I used this code:
.container{
.ningbar
}
What I would like to do is combine the items in the ningbar layer with the items in the container layer. Thanks, Phineas.
This would do the job:
.container { /*container rules*/ }
.ningbar { /*ningbar rules*/ }
.container,.ningbar { /*shared rules*/ }
.container, .ningbar { }
Use the same rules for both.
why do you want to combine two classes ? I would make two seperate classes and use them in my controls as below
CSS:
.class1{
/* All styles for class1*/
}
.class2{
/* All styles for class2*/
}
HTML:
<div class="class1 class2"></div>
This way you can add both classes to your controls/DOM elements keeping them seperate in your CSS.
In order to use another styles' for another class, there is LESS, if I can say.
In a nutshell, LESS will help you to maintain more easily, and comprehensible your styles' files. You will be able to add variables, to avoid repetitions of same colors' codes, for instance.
You can view more detail on LESS's website : http://lesscss.org/
But, it's probably a complicated way, to simply add properties from another class.
For Combining two class you can us
.Class1 .Class2 {
//All style for combination of these two classes
}
Related
I'd like to get the result below using sass nesting
css
.box {...}
h3.box-title {...}
I tried code like this, but it causes an error.
sass
.box {
h3.&-title {
...
}
}
I'd like to know if there is any way to do this keeping sass nesting?
I know that it's not good to write HTML element on CSS,
but I'm working on a project that I can't modify existing CSS and need to overwrite them.
Try this:
.box {
#at-root h3#{&}-title {
...
}
}
I used the sass interpolation #{} to compile expectedly the value of &, and #at-root to prevent the prefix .box (prevent resulting to .box h3.box-title because we want h3.box-title only - without the prefix .box)
Here's the captured result:
Anyway, I don't think this is a good practice to write sass/scss
.box
and
.box-title
are two different class names. Unless h3.box-title is a child of .box, honestly, there's no reason you should be nesting it.
Also & is used to look for additional class names. i.e.
.box {
&.box-title {}
}
would be
.box.box-title {}
I am using selector to select all elements not having one class:
.list th:not(.foo) {
/* some rules */
}
How can I apply this to more than one class?
.list th:not(.foo), .list th:not(.bar) {
/* some rules */
}
The CSS above will not of course do that, I need something like this pseudo:
.list th:not(.foo and .bar)
Is it possible in CSS and how?
You can use as many :not() selectors as you like.
:not(.foo):not(.bar)
With upcoming CSS4 selectors you can use a syntax like:
:not(.class1, .class2, .class3)
and so on. But browser support isn't good so far. To be able to use it today, you can use cssnext for example.
.list th:not[class*="class"] { }
It will work with all classes, like class1, class2 etc.
Use comma to separate class name can get you want
.list th:not(.class1, .class2)
I'm looking into LESS because I definitely see some of their benefits. For instance colour declaration.
One thing I don't understand tho, and maybe I'm not getting the flow right is - why use the following LESS snippet
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.btn-red{
background-color:red;
.radius;
}
.btn-green{
background-color:green;
.radius;
}
...
When we can use the .radius class in the html file right away. I'm left with the impression that LESS will add a ton of duplicate code once it gets compiled.
I'm using the following, which makes more sense. Same with font-size, margins, etc... Aren't classes used in such cases?
<div class="btn-red radius">Cancel</div>
<div class="btn-green radius">Go</div>
The snippet above does not benefit from SASS/LESS capabilities that much. Lets have a closer look and check this SCSS snippet.
// Abstract placeholder.
%radius {
border-radius: 5px;
}
// Put your global styling here.
// I'm assuming that you can alter the markup and have button.btn.btn-green
.btn {
// Color modifier.
&-red {
#extend %radius;
background-color: red;
}
&-green {
#extend %radius;
background-color: green;
}
}
The CSS output will be:
.btn-red, .btn-green {
border-radius: 5px;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
And then you have to pick up Autoprefixer and vendor-prefixes issue is solved once and for all.
Because now, you can just specify the class btn_red or btn_green and all the buttons will automatically have a radius.
Your HTML should contain only the semantics, and styling or classes referring to styling should not be part of it.
That applies to the other classes as well. If for instance, you would rename btn_red to btn_cancel, you have a meaningful classname that you can apply to any kind of cancel button. And in the CSS you can specify that a cancel button is red and a 'Go' button is green, and both have a radius, without needing to modify the HTML at all.
So, the ultimate goal is to have the HTML describe the structure and the CSS describe how that structure should look. And a CSS preprocessor is only their to make a bulky spaghetti-like CSS file more structured.
There are several benefits.
You can use more semantic class names. Rather than encoding style information directly in your class names, (btn-red, radius) you could use a single class that conveys the usage of the style, rather than its contents.
You can avoid repeating yourself.
#radius-size: 5px;
-webkit-border-radius:#radius-size;
-moz-border-radius:#radius-size;
border-radius:#radius-size;
You can parameterize it so that you'd be able to use different radiuses (radii?) in different contexts.
.radius(#radius-size) { ... }
Because there are cases that developer has-no-access or don't-want to change the markup. and the only solution is to include all props from a predefined class.
for example:
you have bootstrap loaded (then you already have .has-success and .has-error classes) and if you want to use HTML5's native form validation using input's :valid and :invalid states, you have to use JavaScript to add/remove success/error classes based on input's states. but with this feature of LESS you can include all props of success/error class inside input's states. the code for this example could be something like this:
#myinput {
&:valid { .has-success; }
&:invalid { .has-error; }
}
I have a class in my css called .btn:
.btn {
//stuff here
}
and I am going to create another class, lets say .btn2. I want to be able to inherit the characteristics from .btn into btn2, as I only want to change the color of button 2. Is there a way in CSS for this? Or should I just copy and paste the original stuff into the new class?
I'd suggest:
/* comma-separated selectors: */
.btn,
.btn2 {
/* shared properties */
}
.btn2 {
/* properties unique to btn2 */
}
JS Fiddle demo.
You can do it with dynamic stylesheets. Check out LESS or SASS.
EDIT:
Some additional info at a commenter's request. Here are the official sites. They both have examples on their home pages.
http://lesscss.org/
http://sass-lang.com/
What you can do is this
.btn, .btn2 {
/* Styles goes here */
}
This way, both the classes will share common properties defined in the rule block.
As far as the inheritance goes, something you would like to have..
.btn2 {
.btn; /* Won't work in pure CSS */
}
Won't work in pure CSS, you need to take a look at SASS or LESS
I have two base CSS classes:
.smpb_color_gray {
color:#cccccc;
}
.smpb_font_size_18 {
font-size:18pt;
}
I wonder if it's possible to create one class which will contains both these classes? With name .smpb_my_combine_class and it must have color:#cccccc and fontSize:18pt.
I want to create one class and then use them on other classes.
Like I want to create:
.smpb_base_border_width{
border-width:1;
}
And then I want to create a class for other control, I want to just include this class, but not create a new class. It's needed if I want to change the default width in future.
If I make a change in the base, then I need that change in all classes.
In regards to JavaFX2, in the .root element you can define a property, such as -smpb-color-gray:#cccccc; and then reference that within another css class.
.root {
-smpb-color-gray: #cccccc;
-smpb-font-size: 18pt;
}
.smpb_my_combine_class {
-fx-text-fill: -smpb-color-gray;
-fx-font: -smpb-font-size;
}
I used -fx-text-fill because I didn't know exactly what you were trying to color.
Does that fit into your criteria?
try this
.smpb_font_size_18,.smpb_color_gray{
color:#cccccc;
font-size:18pt;
}
You can assign multiple classes to one html element like this
<div class="border black"></div>
but you cannot combine multiple classes in one as far as I know.
I haven't really looked into it much, but I think SASS might be able to do what you want.
If you mean using it like this:
.myclass {
.testclass;
}
than the answer is no unless you look into something like LESS.
It is:
.smpb_font_size_18,.smpb_color_gray{
/*whatever style for both*/
}
Basically, what you are asking is what Cascading Style Sheets are all about... Grouping Elements with the same top-level Classes or Ids together. The only thing you would have to do is to create your .smpb_my_combine_class and define the values like this:
.smpb_my_combine_class{
color:#cccccc;
font-size:18pt;
}
And then define your sub classes to replace the top-level class value with the default value like this:
.smpb_my_combine_class .smpb_color_gray{
font-size: medium; //The default value for font-size according to W3C
}
.smpb_my_combine_class .smpb_font_size_18{
color: black; //The default value of your Page font color?
}
So your .smpb_my_combine_class-classed elements will have those default values, as well as each class based on it. But keep in mind that this will only work if your subclass element is contained within an element of the .smpb_my_combine_class-class