The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Add Body Class Just For IE

Last updated on:
<!--[if IE ]>
   <body class="ie">
<!--[if !IE]>-->

Or more robust version putting class on HTML element:

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

Now you can write IE specific styles in a regular stylesheet, by prefacing the CSS selectors with .ie


  1. szek
    Permalink to comment#

    wow, this is a great idea! never thought of that! thanks.

  2. Niels
    Permalink to comment#

    this is really neat stuff, also never thought of it this way, thx!

  3. Nathan
    Permalink to comment#

    Rather then effecting the markup, a better method would be to use JavaScript like CSS Browser Selector which would give you more control and not effect the markup.

    • DVLebanon
      Permalink to comment#

      Actually, Rather then affecting the markup, make IE standard!

  4. Montana Flynn
    Permalink to comment#

    Wow I never knew that you could use a IS NOT IE conditional comment with this:


    That is really nifty for creating separate stylesheets for IE and other browsers. But does it work for all of them?

    • Christopher
      Permalink to comment#

      Yes Montana, it works for all browsers. It really is a conditional statement for IE (not to use the enclosed code), but all other browsers simply see it as a comment before and after the body tag.

  5. mysticpixels
    Permalink to comment#

    This is a good technique indeed … but how is this placed in the semantic correctness world ? Any thoughts ? Im just being curious !

  6. Ant

    I would just use separate stylesheet with same id for both IE and good browsers.

  7. deiga
    Permalink to comment#

    Wouldn’t it be better practice to include IE-specific stylesheets with these conditional sentences?

    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="css/example_ie6.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="css/example_ie7.css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/example_ie5.css" />

    This is the way I do it for a couple of my sites

    • Rob Fletcher
      Permalink to comment#

      The problem with that is that is requires extra HTTP requests. With the technique here your IE rules can go right in the main stylesheet next to the more generic rules they override.

    • Marcel
      Permalink to comment#

      @Rob Yes but if you use separate styleheets, the main stylesheet can be smaller so you’re only slowing down IE user (and who cares about them)

  8. nudier mena
    Permalink to comment#

    awesome article, It solve all my dudes , thanks for sharing with us

  9. Shami Photos

    excellent way of quick work.

  10. Fredconv
    Permalink to comment#

    Great ideo thanks
    Wonder if

    <body <! – – [if IE ] > class=”ie” <![endif] – – >>

    is possible ?

    • Umar Farooque
      Permalink to comment#

      Well, the idea by Chris is really GREAT.

      You can’t put comments inside a tag, so this isn’t possible.

    • russellsayshi
      Permalink to comment#

      No, but you could try

    • russellsayshi
      Permalink to comment#

      Whoops, deleted my HTML tags.
      I meant, you could try

    • russellsayshi
      Permalink to comment#

      Agh! I don’t know how to write this where it will display it. General idea below:

      (if IE)(body class with IE)(end if)(if NOT IE)(body)(end if)

  11. Megan
    Permalink to comment#

    Thank you! Helps iron out the IE issues. Hopefully one day we will have browsers that all work the same way.

    • Jonathan
      Permalink to comment#

      We will never have a time where all browsers worked the same, that’s why there are so many different types, hopefully there will be a time where everyone uses the same browser.

    • frank
      Permalink to comment#

      yeah that would be the best day of our life :D

  12. Art Webb
    Permalink to comment#

    I always forget to use this snippet. It is a lifesaver! I should just add it to my starting template.

  13. Maidul
    Permalink to comment#

    great tips for add ie class.For wordpress users you can do this by filtering body_class For more.

  14. Rahnamafard
    Permalink to comment#

    Thank you for this trick.

  15. aminner
    Permalink to comment#

    Great Idea
    thank you

  16. Stefan
    Permalink to comment#

    It’s just great that after much of discussion in the early stages of this nice little hack, this has somehow became state-of-the-art for most projects by now.

  17. shane prendergast
    Permalink to comment#

    I make use of conditional hacks like this. It’s fantastic adding conditional classes based on which IE is being used.
    However, i can’t understand what you would use a general IE one for? Especially with IE9 being at a decent standard now. I can’t think of any issues where a style could/would be applied throughout all versions of IE with no ill effects.
    All i can think of is .IE body {display:none;} to encourage them to use a different browser! ;-)
    Can someone enlighten me?

  18. Joel Norman
    Permalink to comment#

    It’s a great solution that i am looking for a long long time.

  19. Chris
    Permalink to comment#

    IE 10 no longer supports conditional commenting, so we will need alternate methods like js to detect it.

  20. Donna
    Permalink to comment#

    Thanks for this! I didn’t use it to test for IE, but it was the info I needed to create a conditional statement for a different body class situation.

  21. Ben
    Permalink to comment#

    Vey useful solution, thanks!

  22. Imran
    Permalink to comment#

    We should have a IE class as well!!

    • Imran
      Permalink to comment#

      IE9 class
      <!--[if IE 9 ]> <html dir="ltr" lang="en-US" class="no-js ie9 oldie"> <![endif]-->

  23. Jimmy Xander
    Permalink to comment#

    For MOST projects, it’s not necessary to differentiate between ie6-8. What works in 6 will work in 8. So we can group them all together like so:

    <!–[if lt IE 9]><html class=”oldie”><![endif]–><!–<![if gte IE 9]><html><![endif]–>

    It’s not a perfect solution for every scenario, however it is a good and usable solution for most cases. No need to call for or run extra Javscript, no need to load extra stylesheets.

    It’s a clean minimal solution with the lowest overhead and footprint.

  24. kaostricks
    Permalink to comment#

    Is there any for Mozilla and chrome.

  25. Ashok
    Permalink to comment#

    Does it work in IE 10?

  26. Kavyansh
    Permalink to comment#

    This was really helpful in applying CSS based on IE version to websites. Thanks

  27. tarun
    Permalink to comment#

    is there any javascript code (pref. oops based) that can be used to add a class for “IE” instead of conditional statement?

    i meant to say – using JS code to add the IE class dynamically… (based on browser / OS detaction)

  28. window.location = "";
    Permalink to comment#

    window.location = “”;

  29. Henrik
    Permalink to comment#

    This trick doesn’t seem to be valid html, according to w3c

  30. Prakhar Maheshwari
    Permalink to comment#

    This tricks is very helpful for me, thanks

  31. Abbas Haroon
    Permalink to comment#

    That’s is one kind of approach, besides that, You can include a css file just for IE, or can use special characters as prefix to css properties which will only work in IE or You can use media Queries to use CSS properties only for IE browsers. They can be even used for separate versions of Internet Explorer. Here is a detailed article about it

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed