Question 2668 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Target first level ul li elements only – WordPress

This solution isn’t going to work since I have no control over adding a class/id to the ul element: Get first level li from ul

Given that the parent ul has no id/class, can css be written to target only the first level li? If not, how could it be done?

This is the html:

<ul>
<li id="acomment-62" class=" comment-item" data-bp-activity-comment-id="62">
    <div class="bb-activity-more-options-wrap action"></div>
   <ul>
        <li id="acomment-65" class=" comment-item" data-bp-activity-comment-id="65">
            <div class="bb-activity-more-options-wrap action"></div>
            <div class="acomment-meta"></div>
            <div class="acomment-content"></div>
        </li>
    </ul>
</li>

<li id="acomment-63" class=" comment-item" data-bp-activity-comment-id="63">
    <div class="bb-activity-more-options-wrap action"></div>
   <ul>
        <li id="acomment-66" class=" comment-item" data-bp-activity-comment-id="66">
            <div class="bb-activity-more-options-wrap action"></div>
            <div class="acomment-meta"></div>
            <div class="acomment-content"></div>
        </li>
    </ul>
</li>

<li id="acomment-64" class=" comment-item" data-bp-activity-comment-id="64">
    <div class="bb-activity-more-options-wrap action"></div>
   <ul>
        <li id="acomment-67" class=" comment-item" data-bp-activity-comment-id="67">
            <div class="bb-activity-more-options-wrap action"></div>
            <div class="acomment-meta"></div>
            <div class="acomment-content"></div>
        </li>
    </ul>
</li>
Tags:

2

Answers


  1. 0

    I’m not sure how supported this is but you could apply the style to all li and then override that style to target any descendant li

    EG.

    li li {
  color: initial;
}

li {
  color: red;
}
    <ul>
  <li>A</li>
  <li>B</li>
  <li>
    C
    <ul>
      <li>C1</li>
      <li>C2</li>
      <li>C3</li>
    </ul>
  </li>
  <li>D</li>
  <li>E</li>
</ul>
    Login or Signup to reply.
  2. 0

    You can do that with CSS alone. There’s a few ways you can do it. Here is one of them and a working codepen so you can mess around with it yourself.

    HTML

    <ul>
<li>Item 1</li>
<li>Item with list 1
    <ul>
        <li>Sub 1</li>
        <li>Sub 2</li>
        <li>Sub 3</li>
    </ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item with list 2
    <ul>
        <li>Sub 1</li>
        <li>Sub 2</li>
        <li>Sub 3</li>
        <li>Sub List
            <ul>
                <li>Sub list item 1</li>
                <li>Sub list item 2</li>
                <li>Sub list item 3</li>            
            </ul>
        </li>
    </ul>
</li>
<li>Item 5</li>

    CSS

    li {
color: red;
}

li li {
    color: initial;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search