I want to exclude last and second last child of th to apply some css property.Individually it come be done like
.List thead tr th:not(:last-child){
//Some Css properties
}
and same for second last child.Can it be combined using not operator in one css selector?
CSS3 brings us the :nth-last-child() selector. To combine multiple :not items just add them to the end.
JSFiddle
li:not(:last-child):not(:nth-last-child(2)) {
color:red;
}
According to caniuse.com this method may be only fully supported from IE9. I say may be because caniuse isn't specific enough. Personally, I don't go out of my way to support < IE9 anymore unless it's a requirement.
.List thead tr th:nth-last-of-type(1) ,.List thead tr th:nth-last-of-type(2) {
/*Some Code*/
}
Try This
Related
I have to hide part of a table, the cells are th tags and inside the th I have Span title. I been looking but I can't find any tip. I would like to hide one of the cells, in sort of just hiding one cell of the the entire table. Its possible to perform this with the CSS file?
This is how my css is made:
.GridHeaderStyle th{text-align:center;}
.GridMainSytle td, .GridHeaderStyle th
{
border:thin solid #ffffff;
*border:none;
}
As you can see the th and td are together and I can not really just specify the th in question. Google developper tools show me that the th tag is as
<th scope="col" widgth="10%">
<span title="column1">
I have tried the follow but it hide me all the cells and not the one in question.
.GridHeaderStyle th[scope=col]
{
display:none;
}
Thanks in advance
Please try below CSS code :
.GridHeaderStyle th span {
display:none;
}
Without seeing more of the markup, it's hard to know for sure, but it's likely based on the example that the th[scope=col] selector matches all of your header cells. Look at using the nth-child CSS selector to be more specific, but be aware that's a brittle solution. If your markup changes such that the header you wish to suppress is now in a different order, your rule will hide the wrong column.
If your use case allows it, you could hide the span rather than the column, and therefore address the element a bit more specifically. Try the rule:
th span[title=column1] {
display:none;
}
I have example (js-fiddle)
I want hide all tbody elements, that doesn't contains elements tr elements without class "day_label" and "hide"
In this exmaple i have stats for day, and i need to hide all day if there is no any record for day.
What you want is basically a CSS parent selector (tr.hide < tbody { display: none; }), this doesn't exist yet. (soon!) However, this can be done quite easily with a library like jQuery:
$("tbody").each(function() {
if ($(this).children("tr:not(.hide):not(.day_label)").length) { //Not 0
$(this).addClass("show");
}
});
CSS:
tbody { display: none; }
tbody.show { display: block; }
Demo: http://jsfiddle.net/SO_AMK/RqBCY/
To effectively select a parent based on it's children - what you are asking - is not possible with CSS (at this particular frozen moment in time).
You have two three ;) options:
When generating your HTML (either with a server side language or in JS) generate your parents with classes that describe the state of the children. This way you can target the parent directly.
Use JavaScript to target your parent and then calculate whether or not it has the right kind of children. If it does, then apply a className that adds the styles you require.
For other situations you can also do as Abe Petrillo states - which is to inverse your logic and only enable when a particular selector is found. However I believe this wont work for what you are trying to do as it involves more complcated 'conditional logic' than can be implemented.
Not sure what you mean, but you could hide all rows, and then show the rows that are relevant:
tbody tr { display:none; }
tbody tr.day_label { display: block; }
Given this selector:
body[class*="page-node-add-"][class~="page-node-edit"] {background:red;}
It will match a body which has a class that contains a substring of page-node-add- AND a class which is exactly page-node-edit
I would like to say match the first OR the second (but not both). Is it possible?
The problem with using a comma:
If I have a long selector like:
body[class*="page-node-add-"] form.node-form > .field-type-field-collection > table > thead tr th,
body[class~="page-node-edit"] form.node-form > .field-type-field-collection > table > thead tr th
{...}
That is a pain I would have thought CSS3 would remedy that, I was imagining something like:
body([class*="page-node-add-"]):or([class~="page-node-edit"]) {background:red;}
Thanks
You'll need to split them up using a comma:
body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}
The problem with using a comma:
... is that you can't do it any other way than with a comma. Perhaps it could have been remedied with Selectors 3, but unfortunately the spec says otherwise. That is only going to be remedied by Selectors 4, either because it wasn't proposed until recently, or it was proposed but didn't make the cut for level 3.
In level 4 of Selectors you will be able to do something like this:
body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}
Currently, this is being implemented under its originally-proposed name, :any(), with the prefixes :-moz-any() and :-webkit-any(). But using :any() in public-facing CSS is pointless given that
only Gecko and WebKit support it; and
you have to duplicate your rulesets because of the way prefixed selectors are handled, which not only defeats the intended purpose of the :matches() selector, but makes things even worse:
body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}
body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}
In other words, until implementations update themselves to the standardized :matches(), there is no other viable solution (save from using a preprocessor to generate the repeated selectors for you).
I found the answer here:
CSS Shorthand to identify multiple classes
Mozilla and webkit has a -moz-any or -webkit-any, though in the CSS4 spec there is a :matches. Suprised this wasn't thought of in CSS3 as it would greatly reduce the amount of repetative code without having to use SASS or LESS or whatever.
So you really want XOR when I read your question.
You can achive this by using the :not selector and say "class one and not the other" and the other way around.
div.one:not(.two), div.two:not(.one) {
background:red;
}
Here is a fiddle:
http://jsfiddle.net/XfgxK/3/
I'm trying to get ride of the last column in each table EXCEPT for the last table on the page. Is there a way to do this in css?
Here is what I have, and it doesn't seem to be working...
table:not(:last-child) tr td:last-child {
}
If this can't be done in css, please just let me know. :)
You may want to use table:not(:last-of-type) instead, in case there are other elements after that last table in your page:
table:not(:last-of-type) tr td:last-child {
display: none;
}
It also depends on the browsers you're testing in. No version of IE older than 9 supports the pseudo-classes being used.
How do I color alternate rows in only one column in my table? What's the code for that?
As #afranz409 stated, the ideal solution would be to create a class. However, this can be done with a CSS specific solution, with limited browser capabilities (None of the IE browsers < 9):
table tr:nth-child(2n) > td:nth-child(1) {
background-color: #eee;
}
In other words, for every alternate row, within the first table column, fill the background color #eee. As seen on JsFiddle.
For a more cross-browser compatible solution, I would recommend using this selector within jQuery:
$('table tr:nth-child(2n) > td:nth-child(1)').css("background-color", "#eee");
You're going to have to set the class on the specific <td>'s that you want colored, rather than the <tr>'s like you would for alternating rows
You could do it using the nth-child() selector.
See: http://jsfiddle.net/thirtydot/2NxE6/
CSS:
tr:nth-child(2n) > td:nth-child(4) { /* highlight column 4 */
background: #ccc
}
This works in modern browsers, but it doesn't work in Internet Explorer until version 9.
If you need it to work in earlier versions of Internet Explorer, here are your choices:
Use something like http://selectivizr.com/ to enable significant CSS3 support in older versions of IE.
Apply the selector using jQuery instead - this is a good option if your site already relies on jQuery.
Use another answer that suggests adding a class to the relevant td elements.
For the first column you can do something like:
tr:nth-child(odd) > td:first-child {
background: green;
}
tr:nth-child(even) > td:first-child {
background: blue;
}
It really depends on which column you want to color. If the x-th column, you can try td:nth-child(x).