I am kind of new to CSS. I have css that applied to table->td and table->td->input separately like below in the local file but i am moving these two styles to global css files. So i want this style to be applied to all the table available in the project and also i don't want to create two separate classes and apply it instead i want to create one class, inside that class apply styles for both table=>td and table->td->input. Is there any way to combine these two into one.
What i have currently is,
table td {
...
}
table td input {
..
..
}
Expecting something like this.
CSS:
.someclassname {
table td
{
....
}
table td input
{
....
}
}
HTML:
<table class="someclassname">
..
</table>
Please guide if there is any way to implement in css. Thanks in advance.
If you like to use nested CSS then you have to take a look to the preprocessing / precompiled CSS like SCSS.
CSS preprocessors compile the code written with a special compiler. A valid CSS file would be created, which you can include to your page.
https://sass-lang.com/guide
Related
Inside vaadin-grid.css I managed to get the #table element which contains the grid's rows
and with for example
#table th {
backround-color:green;
}
I can change its color.
Now I need to do that only when the page is printed.I tried adding inside vaadin-grid.css
#media print {
#table th {
backround-color:green;
}
}
but that has no effect.Note that I print the page using javascript print().
I added an id="viewfgrid" (as seen in the screenshot) to the enclosing grid and with that now when I add
inside shared-style.css
#media print {
#viewfgrid {
outline:green;
}
}
I can access and change the grid when printing.
However I can't access the inside table with the rows.I tried various variations like
#media print {
#viewfgrid #table {
background-color:green;
}
}
#media print {
#viewfgrid :host > table {
background-color:green;
}
}
but no effect.
How can I access that table ?
Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect
thanks
I’m not sure why #media print would not work from within the Grid’s shadow DOM styles. Did you try in different browsers? I wonder if there’s some browser bug/limitation here, similar to the fact that you can’t define a #font-face inside shadow DOM.
Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect
The host selector targets the same element as the #viewfgrid ID. To select a host element with a specific ID, you can use :host(#viewfgrid) inside the shadow DOM styles.
Notice, that you should not rely on any ID, class name, or raw tag name selectors when styling Vaadin components (for example #table or th. Those are considered internal implementation details / private API, and can change in any release. You should only rely on the :host(...) and [part~="..."] selectors and state attribute selectors (for example, [focused]).
If there really is a limitation in using #media print inside shadow DOM styles, I think your best option is to use the ::part() selector, which allow you to style named parts inside the shadow DOM from the outside/light DOM styles. That is actually a more robust method than relying on injecting styles into the shadow DOM (via the frontend/mytheme/components/vaadin-grid.css file).
styles.css:
#media print {
#viewfgrid::part(cell) {
background-color: green;
}
}
The API docs show all available parts of the Grid (look for the "Styling" section): https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha3/#/elements/vaadin-grid
Grid is by design not very printing friendly as it has been designed for "infinite vertical scrolling". You wont for example have headers and footers per page. If you want to include "report" functionality to your application, it is better approach to create separate report view that is designed printing friendly instead of screen use. This will allow you to use different layouting and components in it. You can for example generate multiple Grid's for each page. Or use BeanTable component from Directory, which generaters HTML Table without shadow DOM.
Because apparently you can't access the shadow dom from CSS when there's no 'part' tag on the element,as is the case with this table,I got it by using Javascript as in :
UI.getCurrent().getPage().executeJs("const tabledom = document.querySelector(\"#viewfgrid\").shadowRoot.querySelector(\"#table\");
tabledom.style.cssText+='.....' "
So now this snippet is called when the user clicks on a Print button and you can do whatever with the element's style.In my case I flatten the table so that it can be printed without the scrollbar intervening.
I have a Wordpress website which contains a lot of pre-written CSS-code. One of the prewritten code-snippets looks like this:
input[type=url] {
color: #666666;
... (a lot of other styling properties)
}
Now I wanted to create a design for a single page which contains an input field of type url.
<input type="url" id="input_url" class="dtd-settings-element"></input>
The problem is, that I want to style this input field completely on my own but the pre-written code is affecting that style. Is there a possibility to "deactivate" the pre-written CSS snippet for my new input field?
I know that I can overwrite all the attributes from the pre-written snippet in my dtd-settings-element class. But doing this for multiple elements would not be optimal.
Thanks in advance for pointing me in the right direction :)
EDIT:
Last thing I tried was:
input[type=url]:not(#input_url)
You can use the unique id of the input field with !important to target that element and just apply whatever style you want...
#input_url {
color: red !important;
}
You can try to override styling.
#input_url input[type=url] {
color: #000;
font-size: initial;
...
}
Unfortunately there is no way to deactivate pre-written CSS in your terms. All the possibilities you have already mentioned:
Override all class properties
Modify original styles
Change type attribute
However you can change tag from input to (for example) textarea.
I want to add class "responsive-table" to every table element in on my page. What should I do?
If you really want to take the time to do it, simply add class="responsive-table" between the carrots, like this for example:
<tr class="responsive-table">
But if you're already adding the same class to every part of your table with using only CSS, why don't you just put the CSS you want for 'responsive-table' in the table section?
i.e. instead of .responsive-table {/* your css here */}
you just do table {/* your css here */}?
To solve this problem using CSS only, go ahead as follows:
Find the CSS block that declares rules for .responsive-table which should start like this:
.responsive-table { /* rules here */ }
Then add the element selector for table elements to make sure all tables are matched:
.responsive-table, table { /* rules here */ }
You have to add them manually; there's no way to do that with just HTML and CSS, unfortunately. (Then again, if you could, they'd become just another Javascript...)
If you want all table become ".responsive-table" then why not applying all '.responsive-table' CSS code under table selector like following?
table { /* .responsive-table css here */ }
You cannot add classes dynamically to every table element on your webpage by using html and css only. if you want to add class to every table on your webpage, you have to do that manually. or if you want to add same css to all tables on your webpage, try using 'table' element selector css as follows:
table { /* add your css here */ }
Use jquery
<script>
$("table").addClass("responsive-table");
</script>
if you don't know how to use jquery
then just add this line in your head section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
and then put the code above on your page that where you want to add class.
Is it possible to apply a CSS style to an existing HTML table that is constructed as a tree?
For example, in Firefox, the Bookmarks Library table is constructed as a tree. Is it possible to apply a CSS style to one of the columns (but not the others)?
Using treechildren it is trivial to apply a style to an entire row. But how about applying a style to just one column?
CSS nth child should help you solve your problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
Here's a quick example fiddle: https://jsfiddle.net/0gztemg6/
And the CSS from the above example:
td:nth-child(2) {
background-color: red;
}
Use treechildren:-moz-tree-cell-text(*property*), replacing property with the appropriate property name.
For example:
#placeContent > treechildren:-moz-tree-cell-text(placesContentTags) {
color: blue !important;
}
Will color the tags column blue.
Works perfectly.
Is it possible to use existing css class as content in another class ?
I mean something like:
/* Contained in some library: */
.class1 { text-indent: 100 }
/* I can not change this: */
<span class="class2">
The definition for class2 is also contained in another library. So I can not change it directly.
/* But I want to do something like that in my CSS file: */
.class2 { .class1 }
I know it is not possible in that form. But maybe one can use some trick to achieve the behaviour without copying of the content of class1? I need this because I want to redefine class with content from another CSS class. Our project uses jQuery as well, but I would do it rather with CSS.
EDIT: I should explain more, I could not change how .class1 is defined, because this class is in a library, and I could not change mark up on span class.
It is imposible to do in standard CSS what you are commenting, as there is not pure inheritance.
Despite it doesn't apply with your code restrictions, this is the closer way to do it:
.class1, .class2 { text-indent: 100 }
.class2 {
/* Styles you want to have only in class 2 */
}
<span class="class2" />
On the other hand, as #A. Wolff has pointed out, you can still use js/jq to add class to specific elements: $(function(){$('.class2').addClass('class1')}); Then just set a specifc CSS rule for these elements.
In case you don't want to use JS, for something like that you'd need to use SASS or similar, which "compiles" to CSS.
CSS has no means to reference one rule-set from another.
Your options include:
Using multiple selectors for things with common rules
.menu,
.nav {
font-weight: bold;
}
.nav {
display: inline-block;
}
Using multiple classes on a single element
.menu {
font-weight: bold;
}
.nav {
display: inline-block;
}
<li class="menu nav">
Generating your CSS programatically
For example, with SASS
#mixin menu {
font-weight: bold;
}
.nav {
display: inline-block;
#include menu;
}
Yes, it is possoble.
Write:
.class1,.class2 {text-indent:100;}
.class1{color:red;}
.class2{font-size:30px;}
More info here.
Another option is to use LESS to do this. It's a very good tool and do some improvements to your CSS development.
Take a look at theirs documentation, it's very nice. About the compilers, I use Koala and recommend it.
You mentioned in one comment that you cannot use LESS, but I think perhaps you misunderstand how LESS (or another preprocessor) could help you. That is, you have not given any reason that I can see why you cannot use it (even in your update). As I understand your problem, you have the following parameters:
Cannot change html
Cannot change the css file that defines .class1.
You can change the css file that defines .class2.
If the above is correct, then here is how you use LESS (version 1.5+). You make your file defining .class2 a .less file. Then, to keep it clean, I believe you are going to have to do a two step process (it may be you can do step 2 without step 1).
Step One: Make the CSS into LESS
Create a file, let's say CSStoLESS.less and put this in it:
#import (less) /path/to/your/your-css-defining-class1.css;
This will import the css and make the processor consider it as LESS code. It is possible that the next step does that as well, I have not had opportunity to test it out.
Step Two: Use that file as reference in your LESS
By doing this in your .less file defining .class2:
#import (reference) /path/to/your/CSStoLESS.less;
.class2 { .class1; }
You are importing the previous css file that has been converted to less as reference only. This prevents you from getting duplicate selectors for .class1 or anything else contained in your original css file. Now you can use an inclusion of .class1 just like you show in your question to make the properties of .class1 become that of .class2.
It may be that this alone works:
#import (reference) /path/to/your/your-css-defining-class1.css;
.class2 { .class1; }
What I don't know is if the (reference) inclusion also defaults to making .css into LESS code like the (less) inclusion typecasting does in step one. I need to research this out more. If so, then it is a one-step, not a two-step process.
The best way would be to redeclare class1 just below your custom css ends and override it with the values that you are looking for. This way, the inherited values, that you cannot change + the values that you need to incorporate, both shall apply.
I am assuming you want whatever is in .class1 plus some extra properties in .class2
One way is to simply apply both classes to the element you want..
<span class="class1 class2" />
another is to name both classes when setting the properties
.class1, .class2 {text-indent: 100}
.class2{/*extra properties here*/}
You can define 2 classes in this way
.class1, .class2 { text-indent: 100 }
And it will work for you
Moreover if you want to ad some more in class2 then you can define it
.class2 { /*whatever you want here*/ }
Others mentioned SASS and LESS. Here's the solution of Stylus:
.class1
text-indent: 100
.class2
#extend .class1