0

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

Justin S
  • 256
  • 1
  • 3
  • 15

2 Answers2

2

I think this will give you what you are looking for:

.parent > .node > a

Not any .node below .parent node but only the direct child .node of .parent node. And not any a child of .node but only direct a child of above .node node (who is a direct child of .parent node).

Prophet
  • 32,350
  • 22
  • 54
  • 79
1

> 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>
Anuja Nimesh
  • 408
  • 3
  • 13