I need to do:
<p id="un_but" class="blue_but" class="radius_right">SignUp</p>
but this does not work.
Obviously I could just combine the class properties but I was wondering if there is another way perhaps
<p id="un_but" class="blue_but radius_right" >SignUp</p>
dom element(p) can have only ONE attribute(class), but with multiple values separated by space
One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example:
<p class="pullquote btmmargin left">...</p>
This sets the following three classes on that paragraph tag:
pullquote
btmmargin
left
You would assign these as generic classes in your CSS:
.pullquote { ... }
.btmmargin { ... }
p.left { ... }
If you set the class to a specific element, you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS.
You can use the important keyword to set precedence over different classes.
For example:
.pullquote { width :15 px !important }
.btmmargin { width:20px }
p.left { ... }
In the example above 20px width attribute will have more precedence.
Related
Two elements have the same class name, in my case, "img"
Is it possible to style the elements differently that are children of two different classes, even if they have the same class name?
I want the img elements under class "slide-type-final" to be styled different to the img elements under "question-2"
.slide-type-final>img {
max-height: 40em;
}
.question2>img {
max-height: 40em;
display: inline-table;
}
img isn't a class name in this case, is it? Apart from the solution you already have in your question (?), ...:
1.) You can apply a second class to the parent(s), like <div class="slide-type-final up"><img scr="...">, whose img child you would address as slide-type-final.up>img { ... }
2.) You can apply different classes to the img tags, like <div class="slide-type-final"><img class="up" scr="...">, which you would address as slide-type-final>img.up { ... }
it would be helpful if you can provide html structure. and yes, css styles can be override based on parent element/class.
if styles in your code are not overriding, that means hierarchy is not correct.
'>' symbol means img tag (note not class as to catch img class you should have .img) should be direct child of element with class slide-type-final or class question2. if weight of classes are same, then whatever style come last will apply
You can use pseudo-classes like nth-child(2n)/first-child/first-of-type/last-child
Or :not(:last-child) etc.
In an attempt to avoid having to duplicate lots of CSS code for a bunch of different variants of CSS classes, I am attempting to cover it all in one statement. Let's say I have the following layout:
.body[class*="card--"] {
& .child[class*="card--"] {
/* apply some styles if they body have the SAME 'card--' class */
}
}
There are many variants of the "card--" class, such as "card--1" and so forth. I want to apply some styles to .child but only if they both have the same "card--" class.
To select all elements that start with the class name foo. I can use:
[class^="foo"] { }
What can I use to select a custom element that starts with foo.
Example:
<foo-bar>Hola</foo-bar>
<foo-bazz>Hola</foo-bazz>
I want to have a single selector for both elements.
You can't. The [...] selectors only work on attributes, not element types themselves.
What you can do though, as I'm sure you're already aware, is chain them all into one selectors group, but this will mean that you'll need to know the exact element names:
foo-bar,
foo-bazz {
...
}
Failing that, you can always just give them all a shared class or data-* attribute:
<foo-bar class="foo"></foo-bar>
<foo-bazz class="foo"></foo-bazz>
.foo {
...
}
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
}
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