Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css child (>) selector not working in IE8?

From what I gathered and understood here and there (stop me when I'm wrong) : child selector (>) works on IE7+ as long as you trigger the standards mode with your doctype, html5's <!DOCTYPE html> is supposed to do this.

Still, my css:

nav > ul > li > a
{
    padding: 0.2em 2em 0.2em 2em;
    background-color: #FAFAFA;
}
nav > ul > li > a:hover
{
    background-color: #AFAFAF;
}

doesn't seem to reach my html:

<!DOCTYPE html>
...
<body>
<header>
    <nav>
        <a class="inblock valignC logo" href="/"><img src="static/img/logo.gif" /></a>
        <!--Menu nav : LOGO | Agence | Portfolio | Equipe | Clients | Contact-->
        <ul class="inblock valignC">
            <li class="inline"><a class="ie" href="/agence/">Agence</a></li>
        ...
        </ul>
...

in IE8, I have to use the dedicated .ie class I added on targetted <a>s.

Any explaination ?

like image 437
r---------k Avatar asked Apr 24 '12 22:04

r---------k


People also ask

How do you get a child in CSS selector?

The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.

How do I select immediate children only CSS?

The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.

How do I select all child elements except one in CSS?

To select all the children of an element except the last child, use :not and :last-child pseudo classes.


1 Answers

You need to use the HTML5 Shiv for IE versions under 9:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
like image 153
Code Maverick Avatar answered Sep 18 '22 18:09

Code Maverick