CSS selector first-child does not work

Question

I have tried to use :nth-child(n), which does not work as well, am I using this selector on the wrong elements? on the element div with the following class, block_photo.

.block_photo:first-child, .block_video:first-child {
    margin-left:0px;
}

http://tmptstdays4god.ucoz.com/

Answer 1

Your html markup is the following:

<section class="new photos">
    <h4 class="title">...</h4>
    <div class="block-photo">...</div>
    <div class="block-photo">...</div>
    ...
</section>

first-child / nth-child

Matches an element if it is the first child.

.block_photo:first-child {
    /* styles here apply to the .block_photo IF it is the first child */
}

In your case, because the first child is <h4>, the selector .block_photo:first-child matches no element.

first-of-type / nth-of-type

Matches the first element of a certain type

.block_photo:first-of-type {
    /* styles here apply for the first .block_photo element */

    /* that is what you need */
}

---

References:

W3C specification on first-child
W3C specification on first-of-type