Is it possible using less to do a conditional? The logic I want is if a table > tr > td has an a tag, then apply padding: 20px on the a tag. If there is no a tag in the td, then apply the padding on the td itself.
What you are suggesting is not possible in CSS so LESS won't be able to do it either.
However, we can try to be clever:
table > tr > td {
padding-top: 20px;
}
table > tr > td a {
margin-top: -20px;
padding-top: 20px;
}
It looks weird and "hacky", but if i may, so does your request :)
Related
is it possible to avoid this repetitive css declaration?
Somehow group table th and table td under just one weather-component
weather-component table th,
weather-component table td {
text-align: center !important;
}
Something like...
weather-component (table th, table td) {
text-align: center !important;
}
Not possible in CSS. But for example in LESS, you could write that as
.weather-component table {
th, td {
text-align: center !important;
}
}
I already have the following CSS in my stylesheet which adds a counter to each row for all tables in the app:
tbody {
counter-reset: rowNumber;
}
tbody tr {
counter-increment: rowNumber;
}
tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
I now have one table that I don't want to add the counter to, i.e., disobey the CSS rule, out of the scores of tables that the site generates. Would I need to put a unique class name for those three table elements for those tables I want to obey those rules, and then change the CSS accordingly? Ugh. Just thought there may be a way of saying, 'don't follow the css on this table' for this situation.
You could add a class to the tables that should ignore the counter styles (e.g., no-counter). Then alter your styles like so:
table:not(.no-counter) tbody {
counter-reset: rowNumber;
}
table:not(.no-counter) tbody tr {
counter-increment: rowNumber;
}
table:not(.no-counter) tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
So tables that should not have counters would look like this:
<table class="no-counter">
...
</table>
More info about :not here.
The best solution would be to apply styles additively. That is, add a class to all your tables, then change the CSS:
.mytable tbody {}
.mytable tbody > tr {}
and so on. You will almost always encounter <table>s where you do not want the specific, site-wide styles, and then it's as trivial as leaving the mytable class from the table element.
If you can't do that, another option is the :not() selector: Exclude all tables with a class plain:
table:not(.plain) tbody {}
With the following css I define the 1st col of the head of my table
table.search-transport tr th:nth-child(1) { width: 30px; text-align:right; }
I would like to apply this css not only on the head but also on the body of the table.
I know we can proceed in 2 lines:
table.search-transport tr th:nth-child(1),
table.search-transport tr td:nth-child(1)
{ width: 30px; text-align:right; }
But I would like to know if we can proceed in 1 signe line? Something like:
table.search-transport tr th:nth-child(1) + td:nth-child(1) { width: 30px; text-align:right; }
Thanks.
As long as it's any cell in the first column? You should be able to simply omit the th/td part altogether, as well as making use of the child selector since a tr can only have either a th or a td as a child (and you want to ensure you only select its child and not any inner elements):
table.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }
(If you want to support older browsers replace :nth-child(1) with :first-child.)
Generally speaking, though, you can't choose both th:nth-child(1) and td:nth-child(1) separately while avoiding duplicating the rest of the selector. This has been covered to death elsewhere on the site already, but see here for a little extra info.
I guess you are looking for the :any pseudoclass. See https://developer.mozilla.org/en-US/docs/CSS/:any.
table.search-transport tr :any(th,td):nth-child(1) { width: 30px; text-align:right; }
Note: you'll need to vendor prefix this. Untested.
The CSS selector which you are using currently is poor in terms of performance.
Following line answers your question.
.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }
Check the fiddle to see selector in action http://jsfiddle.net/LNJLf/
Currently, I have this selector:
.form .mid td p:last-child:not(:only-child) {
margin-bottom: 0;
}
It's not working as intended. I want to remove the margin ONLY if there are more than one P inside the TD
If your td contains more than just p elements (I can't tell because you haven't shown your markup), you probably want to use :last-of-type and :only-of-type instead:
.form .mid td p:last-of-type:not(:only-of-type) {
margin-bottom: 0;
}
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo