CSS selector ignore nested children

January 5, 2022

I have a nested set of list where I need to select only the first node of children and ignore anything below it.

<ul class="parent">
    <li class="node">
        <a>A link</a>
    </li>
    <li class="node">
        <a>A link</a>
        <ul class="sub-child">
            <li class="node">
                <a>A link</a>
            </li>
        </ul>
    </li>
    <li class="node">
        <a>A link</a>
    </li>
<ul>

In this case I want to style the links <a> but only ones directly under parent>node. What does the selector for this look like in CSS?
I tried .parent .node a but that will also apply to the link under sub-child>node

>Solution :

> means directly under the element

.parent>.node>a {
  background: red;
}

.parent>.node>.sub-child>li>a {
  background: blue;
}

<ul class="parent">
  <li class="node">
    <a>A link</a>
  </li>
  <li class="node">
    <a>A link</a>
    <ul class="sub-child">
      <li class="node">
        <a>A link</a>
      </li>
    </ul>
  </li>
  <li class="node">
    <a>A link</a>
  </li>
  <ul>