The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] First-of-type affecting elements further down

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #151044

    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">
                <img src="images/header-scallop.png"/>
                    <a class="logo" href="index.html"><img src="images/logo.png"/></a>

    What gives? Thanks!


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


    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.

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.