Is there a way you can have a CSS file with one class let say p.one{color:red;}
and apply it to different tags? is there a way i can get an example if this is possible?
with one class
That isn't a class. It is a rule-set with a selector consisting of a type selector and a class selector.
and apply it to different tags?
Don't specify the element type. Use a class selector by itself.
.one { color: red; }
Create a class with color name that will be easy to use.
.redText { color: red; }
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.
I have a class as follows:
.X { color: #123456; background-color:#987654 }
Is it possible to do the following without using scripting code?
a:hover {
//set css to all in class X
//color: the color specified in class X
//background-color: the color specified in class X
}
I don't think so but you could include both the element and the class like so:
a.X:hover
p.X:hover
h1.X:hover
...
Hope that helps.
What you might be looking for is use a css preprocessor like SASS, in which you do exactly what you ask, you define a class .X and then inside an element you extend that class using #extend .X
You should look into it!
Perhaps a little basic question, but is it possible to style elements of a table by classname in JavaFX. So for example like this:
MyClassname .table-view .column-header .label {
-fx-text-fill:#F00;
}
I want this to style multiple tables within 1 stylesheet.
thanks in advance
Yes, styling based upon class name selectors is supported - it's based on Node.getTypeSelector(), which comes from the Styleable interface.
The type of this Styleable that is to be used in selector matching. This is analogous to an "element" in HTML. (CSS Type Selector).
Returns: getClass().getName() without the package name
So you could style all Labels to have a green text fill using the CSS rule:
Label { -fx-text-fill: forestgreen; }
Most nodes also have style classes which are set on them by the application or, if it is a standard control, by the JavaFX framework. The standard way most people code is not to use the type selectors but to use style class selectors instead:
.label { -fx-text-fill: forestgreen; }
The type selector information is documented in the JavaFX CSS reference guide:
Node's getTypeSelector method returns a String which is analogous to a CSS Type Selector. By default, this method returns the simple name of the class. Note that the simple name of an inner class or of an anonymous class may not be usable as a type selector. In such a case, this method should be overridden to return a meaningful value.
Specify the full path to your class from root.
.root MyClassname .table-view .column-header .label {
-fx-text-fill:#F00;
}
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
I have a css class like:
.foo {
background-color: red;
}
then I have a class specified for a list:
.list1 li {
background-color: tan;
}
is it possible to set one style class to just point to another? Something like:
.list1 li {
.foo;
}
not sure how to articulate that - I just want the .list li style to be whatever I define for the .foo class.
You can use selector grouping:
.foo, .list1 li {
background-color: red;
}
No. The best you can do with "native CSS" is to use a multiple selector:
.foo, .list1 li {
...
}
Otherwise there are preprocessors that can help with this such as SASS.
Not with any syntax like that (and don't confuse a "class" (an HTML term) with a "class selector" or a "rule-set").
Your options are multiple classes, grouping selectors or preprocessing.
You might want to look into a CSS preprocessor such as SASS or LESS. You can define variables that can be used throughout your code. It greatly speeds up your coding when you're familiar with it.
http://sass-lang.com/
http://lesscss.org/
Using SASS:
$darkred : #841c14;
.box {
background: $darkred;
}
No you can't but you override it using naming differnt classes for example
.foo {
background-color: red;
}
.list1 li {
background-color: tan;
}
class ="list1 foo"
Inheritance is, as far as I know, not supported in CSS (2.1 at least)
Afaik, this isn't possible (yet) I hope it will be in the future. I always just copy+paste whatever I want to be the same into the desired selector or put the selector names one after another:
.foo,
.li,
.whatever
{styles}
Maybe someone else has another suggestion.
The above solutions aren't available if you don't have control over how 'foo' was defined.
So, if a JQuery solution is acceptable, just apply the original class to all instances of the new class/context. In this case:
$('.list li').addClass('foo')
to help clarify what is meant by overriding, if you want .list1 li to carry all the styles of foo, but just want to change it's color to tan, i would do this:
<span class = "foo">
<span class = "list1"><!--or whatever name you have for your new style-->
TEXT WITH INHERITED STYLE GOES HERE
</span>
</span>
I've a litte expand #Frank Carnovale solution (without css changing). After page loading:
$(function () {
$('.list li').removeClass('old1 old2 ...')
$('.list li').toggleClass('foo1 foo2 ...')
}
See also Does addClass in JQuery override any existing css class based styles?