apply css except internet explorer

Question

Suppose I would apply the following css:

h2:nth-child(3){
     /*some styles*/
 }

This won't work in IE. So I need to re-style for IE using the styles for IE only but if there is too much styles applied then for IE I've to re-style for IE and perhaps more works than previous works. So is there any technique so I can apply css for all browsers except for IE?

IE does support `nth-child` for IE9 and up, With which version are you having a problem. That said, it seems odd to have that many `h2` in an element. — Paulie_D, Oct 31 '13 at 12:21
In fact, `nth-child` does work in IE... as long as you're working with IE9 or later. You're right that it isn't supported by IE8. But if you're going to think along these lines, you should be aware of exactly which browser versions you're dealing with; don't just do something that blankets all IE versions, because it won't be appropriate in most cases. — Spudley, Oct 31 '13 at 12:22
"*is there any technique so I can apply css for all browsers except for IE8?*"... well, what about the selector in your question? Doesn't that do exactly what you've just asked for -- apply to all browsers except the ones that don't support it? — Spudley, Oct 31 '13 at 12:26

score 3 · Answer 1 · answered Oct 31 '13 at 12:21

3

You might consider using conditional comments to isolate the IE only styles

So style the elements as you are doing now, and then restyle what is needed for IE.

Example:

<!--[if IE]>
  //styles here
<![endif]-->

If you want to target IE 8, you could do this

<!--[if IE 8]>

Read more: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

answered Oct 31 '13 at 12:21

Jason Gennaro

34,535
8
65
86

Be aware that IE10 and later no longer support conditional comments. Also, the question (and therefore your answer) really needs to be specific about the IE version he's targetting. – Spudley Oct 31 '13 at 12:23
I know about conditional styles for IE but probably re-read the question. – Bhojendra Rauniyar Oct 31 '13 at 12:26
Thx @Spudley. After seeing the OP's comment about IE8, I modified this answer. – Jason Gennaro Oct 31 '13 at 12:27
Hey @C-Link. This is what your questions says "So is there any technique so I can apply css for all browsers except for IE?" The answer to that is conditional comments. Was there something else you wanted to do? – Jason Gennaro Oct 31 '13 at 12:28
No worries @C-Link! Just checking. – Jason Gennaro Oct 31 '13 at 12:33

score 2 · Answer 2 · answered Oct 31 '13 at 12:26

2

You can use something like initializr does for adding classes for old Internet Explorers

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

In your css you can now write code just for old internet explorers like that:

.oldie h2 {
  /* custom h2 styling just for old Internet Explorers*/
}

answered Oct 31 '13 at 12:26

darthmaim

4,970
1
27
40

It's too good but just your answer works or should I download your link.... I don't know about that.... – Bhojendra Rauniyar Oct 31 '13 at 12:36
You can just use my posted code, it will work in your case. But for future projects you might consider using templates like [Initializr](http://www.initializr.com/). – darthmaim Oct 31 '13 at 12:39

score 0 · Answer 3 · answered Oct 31 '13 at 12:24

0

.ie h2:nth-child(3){

 }

another way

<!--[if IE]>
  //styles here
<![endif]-->

answered Oct 31 '13 at 12:24

Bipin Kumar Pal

1,009
2
8
16

score 0 · Answer 4 · edited May 23 '17 at 12:03

As other suggested, you can use conditional comments in your HTML to make specific CSS for IE, example:

<!--[if lte IE 8]>
 <link rel="stylesheet" type="text/css" href="custom-ie.css" />
<![endif]-->

Whereas if IE 8 target ONLY IE 8. if IE target all of them. if lte IE 8 target IE 8 and lower (lte = Lower Than or Equal).

If your project has jQuery, instead of having more work creating other CSS, you can use jQuery's selector for applying newer selectors on older browsers. For that you do:

h2:nth-child(3), h2.nth-child-3 { /*note the class I added */
     /*some styles*/
}

The function to test selector compatibility:

function selectorSupported(selector) {
    var support, link, sheet, doc = document,
        root = doc.documentElement,
        head = root.getElementsByTagName('head')[0],

        impl = doc.implementation || {
            hasFeature: function() {
                return false;
            }
        },

        link = doc.createElement("style");
    link.type = 'text/css';

    (head || root).insertBefore(link, (head || root).firstChild);

    sheet = link.sheet || link.styleSheet;

    if (!(sheet && selector)) return false;

    support = impl.hasFeature('CSS2', '') ?

    function(selector) {
        try {
            sheet.insertRule(selector + '{ }', 0);
            sheet.deleteRule(sheet.cssRules.length - 1);
        } catch (e) {
            return false;
        }
        return true;

    } : function(selector) {

        sheet.cssText = selector + ' { }';
        return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0;
    };

    return support(selector);

};

With this function, now you can test selectors and do accordingly:

//For browsers without :NTH-CHILD(N) - aka IE7/8
if (!selectorSupported(':nth-child(n)')) {
    $('h2:nth-child(3)').addClass('nth-child-3');
}

Other example of test:

//For browsers without :LAST-CHILD - aka IE7/8 too
if (!selectorSupported(':last-child')) {
    $('p.last-child').addClass('last-child');
}

But of course, only if you want the javascript approach, to not have to double css.

apply css except internet explorer

4 Answers4