CODEWITHSUNDEEP
csscss-selectors
Sodbileg Gansukh
Sodbileg Gansukh

Reputation: 1730

Selecting descendants except first level one

<ul>
  <li></li>
  <li></li>
  <li class="has-child will-be-ignored">
    <ul>
      <li></li>
      <li></li>
      <li class="has-child will-be-selected">
        <ul>
          <li></li>
          <li></li>
          <li class="has-child will-be-selected">
            <ul>
              ...
            </ul>
          </li>
        </ul>
      </li>
    <ul>
  </li>
<ul>

Is there any way in CSS to select elements with class has-child will-be-selected. These elements could be continued any number of level.

UPDATE:

will-be-ignored and will-be-selected classes are just to highlight them to be selected. These classes don't actually exist.

Upvotes: 1

Views: 87

Answers (3)

BoltClock
BoltClock

Reputation: 724152

Sure, step to the first level and then target the ones underneath that:

ul > li.has-child li.has-child

Of course, depending on your structure, you may have to anchor that first-level ul to its own parent to make sure that its child li isn't inadvertently matching the selector, e.g. if your ul happens to be in another list.

Upvotes: 2

Leo
Leo

Reputation: 14850

The simplest and most straight-forward way would be this selector...

li.has-child.will-be-selected

that selects all elements that has both has-child class and will-be-selected class as per your question description. However, if you want to skip the first level use...

ul ul li.has-child.will-be-selected

as per the title of your question

Upvotes: 0

Felix
Felix

Reputation: 38112

You can use:

ul ul > li.has-child.will-be-selected

Upvotes: 1

Related Questions