[Solved] First-of-type affecting elements further down

[modiophile]

I simply want to lose the top horizontal bar when my page is scaled down to 959px or below.

header img:first-of-type {
            display: none;
        }

I was very specific, yet it seems the rule is affecting another image further down the casscade that is nested inside a “nav” and “a” tags

<div id="container">
        <header>
            <img src="images/header-scallop.png"/>
            <nav>
                <a class="logo" href="index.html"><img src="images/logo.png"/></a>

http://cdpn.io/BzwIA

What gives? Thanks!

[sadunaresh]

first-of-type doesn’t good browser support though… it does nt work in IE7 an IE8

[Paulie_D]

The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

So header img:first-of-type will select the first image inside ANY container provided that the container is within the header header.

http://codepen.io/Paulie-D/pen/vBlad

Overall, it would be much easier to just give that image a class or ID and use that in your media query.

[Paulie_D]

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

[Author]

Posts