I am using sapui5 where all the tables are preformatted
with SAP's css classes.
I have my own table where I want to remove all borders .
The table is designed with the id selector.
My question: how am I to remove SAP's class restraint
so that only my table is excluded from this class
attributes
e.g
#myTableClass :not .SAPClass>tr
{
border : 0px !important;
}
All other tables in my HTML doc should go
on inherting SAP's original class attributes.
Any suugestion will be highly appreciated
rgds
Yuval
If you're just trying to apply no borders on the table, do this:
.your-class-name {
border: none !important;
}
Related
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 am trying to make a specific column to blue color.
For that I am using
clientsTable.addColumnStyleName(3,"nameColumn");
And the CSS is:
nameColumn {
color:blue;
}
but it's not doing anything whereas if I change my CSS to this
nameColumn {
background-color:blue;
}
it works, i.e make header color red , but why is not changing text color ?
thanks
addColumnStyleName adds the CSS class to a <col> element in the DOM, and only a handful CSS properties apply there (see also browser compatibility table)
You'd want to apply a CSS class to each cell in the column instead, using Column#setCellStyleNames()
Try
.nameColumn {
color: blue !important;
}
I'm working on some CSS from a tutorial, a div has this class:
<div class="related products">
How can I reference it in the stylesheet?
The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:
.related { color:#ff0000 }
.products { font-size:12px }
If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:
.related.products { font-weight:bold }
And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.
div.related.products is the general method
You reference it by div.related.products which literaly translates to "a div with class of related and class of products".
Or, you could reference it by using either class names, since it will catch both.
jsFiddle Example.
In the css, just put the name class of the div by doing this:
.related products {
/*styling to go here*/
}
Now any styling within the related products class will be applied to that div.
is it possible to set the style of alternating rows in a html table with style selectors that only take account of the hierarchy of elements and do not use style names?
i need to style html output produced by a server component and the output does not set styles for alternating rows. i could write a javascript (or just as well change the component) but i am curious about whether it is possible to do in pure css.
thanks
konstantin
In CSS 3:
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
And in CSS 2, you have to use some class on e.g. even rows like:
.even { background-color: #00000; }
and you have to apply them when generating the rows server-side (or in hand ;-) ) or with e.g. jQuery like:
$(document).ready(function () {
$("tr.nth-child(even)").addClass("even");
//Or
$("tr:even").addClass("even");
});
Basically I have a theme in my ASP.NET application and it contains a css file that turns all my tables blue, which looks great.
It looks like this
table
{
background-color: #DEF1FF;
border-color: #DEF1FF;
color:#5793C9;
}
td
{
// TD properties
}
But now I want one table to be a different colour. I created a class to override it:
.BlankTable
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
I set a <table class="BlankTable"> and I have two problems:
firstly, if I put another table inside that one, it does not inherit BlankTable but uses the original table part of the css file
secondly, if I use the td part to set a td specific property (like padding), it doesn't carry across - <table class="BlankTable><tr><td>hello world</td></tr></table> results in the using the td I put in the CSS file.
Ideally what I want is to set my CSS code like this:
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
table { // properties }
td { // properties }
}
so it uses the table/td properties I specify for the .Blank css class. Is there any way to do this or to refactor my code somehow so I can have all tables looking blue by default, and be able to override it easily?
You can do that, but the syntax is :
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
.Blank table { // properties }
.Blank table td { // properties }
These last 2 rules will match a table and td located inside anything with class "Blank".
Use it like this:
.Blank table {...}
.Blank td {...}
Although I must warn you: there are rare cases where you should use a table inside another table.
The other answers are correct, but it's worth pointing out that this is just one type of CSS selector (the descendant selector). There are all sorts of other CSS selectors that you might want to use to target specific elements.
It's worth getting familiar with them - you might be surprised with what can (and can't) be done. (Using jQuery will also be a lot easier if you are familiar with CSS selectors.)