How to select first Descendant with CSS

Question

I have this snippet

       <li class="overview">
            <a href="...">
                <span class="txt">Link 1</span>  
            </a>
            <ul class="sub-menu">
                <li class="navBI">
                    <a href="...">
                       <span class="txt">Link 2</span>
                    </a>
                </li>
            </ul>
        </li>

And I want to select only Link 1 but I cannot find the answer. I tried .overview .txt but it also choose Link 2. I am not so familiar with the CSS Combinators.

I also tried .overview > a > .txt.

Is there something I miss?

`.overview > a > .txt` appears to be working perfectly fine here already for what you want. Not sure what the actual issue is supposed to be now? Provide a proper [mre] if you are having trouble with this. — CBroe, Mar 25 '20 at 09:05
What exactly is the difference if I use `.overview > a:first-child > .txt`? — Haidepzai, Mar 25 '20 at 09:13

score 0 · Answer 1 · answered Mar 25 '20 at 09:08

       <li class="overview">
            <a href="...">
                <span id=“text” class="txt">Link 1</span>  
            </a>
            <ul class="sub-menu">
                <li class="navBI">
                    <a href="...">
                       <span class="txt">Link 2</span>
                    </a>
                </li>
            </ul>
        </li>

#text {
Stuff: stuff;
}

Could you use an id? Is it being generated in .js?

No I cannot change anything unfortunately... – Haidepzai Mar 25 '20 at 09:18 — Haidepzai, Mar 25 '20 at 09:18

How to select first Descendant with CSS

1 Answers1