Does anyone know which browsers/version support them?
Is it safe to use them, or should I resort to PHP / javascript to generate first/last classes?
:first-child and :last-child, along with complimentary compatibility chart.
:first-child is supported IE9 properly, and IE7 and IE8 sort of (see chart).
:last-child is supported by IE9+ only.
Both of them are supported well by the good browsers.
"Can I use..." should be your go to resource for these types of questions. Here's are the compatibility tables:
first-child - http://caniuse.com/#feat=css-sel2
last-child - http://caniuse.com/#feat=css-sel3
Here's a nice table illustrating different browser support.
Related
I need to ensure IE7 and IE8 support.
I'm using a few CSS3 selectors like :last-child. I dropped in Selectivizr, and it appears to fix many problems in those browsers, leaving me just a handful to clean up with some fallback code.
But HTML5 Please recommends using only fallbacks, not polyfills, to address CSS3 selector support:
We strongly recommend you do not try to polyfill this, but if you do need one, you can use Selectivizr.
It would be good to know why they "strongly recommend" against polyfills here... Anyone have any ideas?
Using a fallback I think means you should be adding classes to the elements that you cannot select with modern selectors like adding .first to be used for :first-child, or .checked for :checked, and so on.
I can't think of any reason HTML5 Please recommends not to use polyfills so strongly, except for performance and independence from JavaScript. It's best to depend solely on CSS to style and draw.
But in my humble opinion, Selectivizr is a piece of magic that will teach IE6-8 to behave and ensure your HTML is clean from unnecessary classes and will shorten your development time.
The > character can be used with CSS to select an element that has a certain parent.
The benefit I see here is that I can apply styles only to a certain level of a list for example. Like menus - first level is orizontal and has different rules than 2nd level+. so i don't need to worry about resetting properties for lvl 2+
Anyway, can I depend on >? Is it supported by all browsers and without buggy behaviors?
The child selector > is fully supported by IE7 and later, and not at all in IE6 and earlier. Of course, all versions of all other major browsers in use today support it fully as well.
All CSS2.1 selectors are well-supported by IE8 and later so you can use them today, unless you're writing legacy code that needs to cater to IE6, in which case avoid them where possible.
The SitePoint Reference does mention an obscure parsing bug related to comments that affects IE7, but it only breaks the selector if a comment is there. You don't usually put comments in the middle of selectors unless you're doing so as a hack, so you don't need to worry about this bug.
Related: Are CSS child selectors a W3C standard? (Of course they are!)
It's part of the CSS2 standard: http://www.w3.org/TR/CSS2/selector.html#child-selectors so modern browsers should support it.
According to this quirksmode.org, only IE6 and earlier do not amongst major browsers. I only see IE6 used in very situational cases (like dedicated machines that don't receive software patches).
I am wondering if there are any other selectors which select only part of an HTML element. I know of these two:
:first-letter
:first-line
But AFAIK there are no other selectors which do this. I am interested in any (even browser-specific) selectors or other methods of manipulating only part of a block of text.
The Use Case
I have (more) control over the .css and .js than over the DOM. I've been using js workarounds but want to include any CSS solutions as well, because I don't like to depend of javascript for my styles.
Even if the solution is only supported in konquerer it is still better than nothing IMO.
Nope, those are the only two content pseudo-elements available that select real text nodes. Nothing new has made it into the CSS3 recommendation.
One of the proposals that didn't make it was ::selection (roughly implemented by Opera, Safari and Chrome, and by Firefox as ::moz-selection), but your use case doesn't really say anything about what you want to do so I have no idea if that selector is relevant to your needs.
I'm not aware of any browser-specific pseudo-elements, but there are also the ::before and ::after pseudo-elements. See the CSS 2.1 specification from the W3C.
Does anyone know why the following CSS code is not working on IE8, and yet it's working on EVERY OTHER browser?
table.wrap tr:first-child td, table.wrap tr:last-child td { height:20px; }
table.wrap td:first-child, table.wrap td:last-child { width: 20px; }
I understand that IE8 does not support CSS3 features. But I don't think I'm using CSS3 here.
I sincerely appreciate your help.
Thank you so much!
See Quirksmode.org for a full compatibility chart of all CSS features across all the various browsers.
As you'll see from the link above, IE8 does not support the last-child feature.
It does support first-child, but since you've put them together in the same selector, it will throw the whole thing away because it doesn't recognise the last-child part.
Also note note that Quirksmode first-child as being buggy in IE8, so even though it is supported, you may want to be careful about using it.
To solve the problem, you might want to try an IE hack to get it to support extra CSS features.
One that looks quite good is Selectivizr. You might also want to look into Dean Edwards' ie7.js / ie8.js / ie9.js. Both of these aim to patch missing features into older versions of IE. They're not perfect, but they may resolve the problem for you.
Hope that helps.
IE isn't compatible: http://reference.sitepoint.com/css/pseudoclass-lastchild
I believe last-child is a part of css3 and not supported by IE8.
Does anyone know why this CSS selector works in Firefox but not in IE7 or IE8?
css=div[style~='visible;'] div[class~='x-combo-list-item']:contains('Test Job')
I'm using this in a Selenium test to find an element on the page.
Edit: The :contains selector is not the problem. I'm using it elsewhere in my tests and it works in IE6, 7, and 8.
I know that Selenium attempts to support all of CSS3 for all browsers in it's selector engine. It may be that it does not support multiple levels of the attribute selectors in IE.
You might be stuck with an XPath "locator" this one
Alternatively, you could try:
div[style~='visible'] .x-combo-list-item:contains('Test Job')
Probably because the :contains pseduo-class is a CSS3 addition and whatever version of IE you're using (you didn't specify) probably doesn't support :contains.
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors