I'm styling a table using CSS and I realised that IE8 doesn't support :nth-child
So before I added support for IE8, the css looked like so
.my-comments table.comments-list tr td:nth-child(1){width:18%;}
Then I added another selector like so
.my-comments table.comments-list tr td:nth-child(1), .my-comments table.comments-list tr .datecol{width:18%;}
IE8 doesn't like this, it wont recognise the 2nd selector but if I take out the first one like below then it works
.my-comments table.comments-list tr .datecol{width:18%;}
Any ideas how to fix this?
Obviously I could just use the above code but I'd like to leave in both selectors for future browsers
I would try making the style separately (without the comma). IE8 is probably not recognizing the :nth child and skipping the declaration.
If you would still like your nth-child(1) style to work in IE8 (with out having to add the .datecol class) you could change your CSS to the following:
.my-comments table.comments-list tr td:first-child + td {
width:18%;
}
The above code would target the second td - which is what I believe you are aiming to do with nth-child(1) and is support across a wider range of browsers.
I feel like I'm missing something here. Can't you just separate them into 2 different lines?
.my-comments table.comments-list tr td:nth-child(1){width:18%;}
.my-comments table.comments-list tr .datecol{width:18%;}
Related
I've seen several questions talk on this and make recommendations. I'm simply trying to make the alternatiing rows in Bootstrap (2.3.2) appear darker in I.E. 8. I've tried overriding the style with a notably darker background color:
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
background-color: #BFBABA;
}
I've cleared my I.E. 8 browser cache; closed it and re-opened, and yet nothing I change for this style seems to take effect. I've styled my table with the following:
table table-bordered table-striped
Notably and predictably, the changes work in Chrome just fine.
Does anyone have any thoughts or possible work arounds here?
Usage of nth-child() is not supported by IE8 and down.
It is, however, supported by IE9, IE10 and all other, current browsers.
See http://caniuse.com/css-sel3
You will have to take another approach to overwrite the properties if you want it to work in IE8 <
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
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 am having trouble getting my CSS to look right. I want alternating colors in my table, but it doesn't seem to be working. Here is my CSS:
table.className tbody tr:nth-child(even){
background-color: white;
}
table.className tbody tr:nth-child(odd){
background-color: grey;
}
Your code looks good. Could be two things, your version of IE that you are using is to old (IE8 and below I believe doesn't support this), or you have these styles being set elsewhere with a !important attached to them.
Without seeing the HTML, there are a couple of possibilities:
The class name doesn't match
The tbody tag is missing (either way, tbody isn't needed in the CSS selector)
There are a couple of reason as to why this may not be working for you. First the CSS code that you are using is CSS3 and may not be supported in the browser you are using: http://www.impressivewebs.com/css3-browser-support/
Another reason this may not be working is that you have included the "tbody" tag in the CSS which indicates that your html table is setup as such. This is actually a tag that some developers forego, if you html table does not have a "" tag then you must remove it from the CSS in order for this to work.
Given that its been established that you are using IE8 which doesn't support :nth-child in CSS, you can achieve the same thing using jQuery for better cross-browser support:
$(function() {
$("table.className tr:nth-child(even)").css('background-color','white');
$("table.className tr:nth-child(odd)").css('background-color','grey');
});
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).