Question

I am working on a CMS platform with limited access to the template files and want to try and control some of the layout with pseudo class but no luck yet. Can anyone see what is wrong with this structure and why my pseudo class is being ignored?

<div id="main">
    <div class="someRandomDiv"></div>
    <div class="block">
    stuff
    </div>
    <div class="block">
     more stuff
    </div>
</div>

and i am trying something like this

#main .block {border: 1px solid blue}
#main .block:first-child {border: 1px solid red}

so with this example I would think the stuff block would have a red border and more stuff would have a blue but it is all just blue.

Thanks for any help with this.

Answer 1

It’s not being ignored, there just aren’t any matches 🙂

I realize it’s a bit counter-intuitive, but :first-child literally means first child of the parent, not of the type, of the parent, so the only thing that matches :first-child in your code is <div class="someRandomDiv"></div>.

With .block:first-child you’re saying elements that have a class of block and are the first child of their parent, it’s not saying “the first one with class block“…they’re independent selectors and don’t overlap here. So, there are no matches since no element matches both conditions, that make more sense?

It won’t support all browsers, but you could use :nth-child() or javascript to do what you want, for example in jQuery it would be:

$("#main .block:first").css({ border: '1px solid red' });