Home/ Questions/Q 8844571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T11:31:17+00:00

I am looking to use some conditional styling for IE 9 – but I

  • 0

I am looking to use some conditional styling for IE 9 – but I want to have the conditions inside my main style sheet – not using a second style sheet or referencing it in the HTML page. At the moment, I am putting this code in the HTML page, which works because it overwrites the other styles in the main style sheet:

<!--[if IE 9]>
<style>
nav li a:hover {
    text-decoration: underline;
    color: black;
}
nav .four a:hover{
    color:white;
}
</style>
<![endif]-->

But I would like to have these conditions in the CSS sheet, so that its all located in one place and I don’t have to repeat the code in every page. I would also rather avoid having a separate CSS just for IE 9 – I already have one for IE 7-8. I tried this in the style sheet:

<!--[if IE 9]>

nav li a:hover {
    text-decoration: underline;
    color: black;
}
nav .four a:hover{
    color:white;
}
<![endif]-->

The above code is specific for my nav bar for IE 9 (its a fix for the nav bar because IE 9 doesn’t support text-shadows).

Is there a way to do this in the CSS style sheet?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Conditional Comments are only for HTML, but you can take advantage of it in your CSS. HTML5Boilerplate does this by adding a class to the html element (https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

    <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    This gives you a hook you can use for targeting IE only:

    .lt-ie8 .my-style { color: red }
    • 0