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

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

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

    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.


    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:

    Kitty Giraudel

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


    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.


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

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