Grow your CSS skills. Land your dream job.

CSS first-child not working on site, but works on CodePen?

  • # January 25, 2013 at 1:25 am

    Hey guys,

    This is my very first post on here, I prefer to search over starting new threads but I’m really stumped on this one. I have a bit of CSS that works on CodePen how I want it but if I add it to my site it stops working. What I’m trying to do is simple, set a left margin on all ul lists, then remove the left margin for the first ul using first-child, simple right? That’s what I thought but I must be missing something as it’s not working on my site and its driving me crazy. Would you take a look and see if you see what I’m missing here?

    Thanks guys.

    http://codepen.io/Presto/pen/paGnj

    http://www.interfacetour.com/evites.html?e=1&r=43

    # January 25, 2013 at 2:09 am

    Can you try this?

    [http://codepen.io/Krish1980/pen/qAHkz](http://codepen.io/Krish1980/pen/qAHkz “”)

    I think it should work

    # January 25, 2013 at 2:14 am

    That’s because on your website there is no `

      ` that is first child. The first child of `#description` is actually this:

      INTERFACE13 bkgd-D PHOTO smallIncluded in your INTERFACE Experience:

    # January 25, 2013 at 4:06 am

    Don’t confuse :first-child and :first-of-type. I think you meant the latter. :)

    # January 25, 2013 at 6:01 am

    Thanks for the codepen Krish1980
    *sigh* you are correct TheDoc, HugoGiraudel, yeah I was using :first-of-type at the start and that worked really well, but I needed to make it IE7 friendly, so should I just add a class to that first ul and style that class? basically everything within the description div is editable with a wysiwyg text editor from the backend by the board of directors of the event, and they do not know coding at all, so if they update the description content and remove the first ul and then add it back in they end up braking the layout because the ul with the class was removed and added backin without the class applied to it, so I was trying to future proof the description layout. But I guess I will have to apply a class to that first ul to make IE7-8 happy.

    http://codepen.io/Presto/pen/jExhK

    # January 25, 2013 at 3:13 pm

    You could always try [Selectivzr](http://selectivizr.com), which is a JavaScript polyfill that brings support for advanced selectors to Internet Explorer. That will allow you to use `:first-of-type`.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".