:first-child is not working properly

[borissuska]

I found a problem with :first-child psedo-class selector.

For this HTML

<div>
    <a href="javascript:void(0)">&times;</a>
    <div class="links">
        <ul>
            <li>
                <a href="https://github.com/">link 1</a>
                <span>(info)</span>
            </li>
            <li>
                <a href="https://github.com/">link 2</a>
                <span>(info)</span>
            </li>
        </ul>
    </div>
</div>

Selector .links > ul > li:first-child > a matches 0 elements, selector .links > ul > li > a matches two elements. Expected behavior is that selector .links > ul > li:first-child > a matches this element:

<li>
    <a href="https://github.com/">link 1</a>
    <span>(info)</span>
</li>

[0xdeadbeefc0ffee]

the first child of .links > ul > li is a, so .links > ul > li:first-child > a equates to .links > ul > a > a, hence returning false.

[borissuska]

What you describe is not a CSS behavior. The :first-child in CSS is applied on set of already selected elements and filter only elements which are situated as the first element in its parent.

When I use an example from my first comment .links > ul > li:first-child matches first li element - entire li element, not only a element.

When I use div > div:first-child it matches nothing because first element of root div is a and first element of div.links is ul -> there is no div element inside of another div at first place.

I made a mistake in my first comment, selector .links > ul > li:first-child > a matches by CSS specification:

<a href="https://github.com/">link 1</a>