Question 45790 in CSS Question posted in
Some basic documentation can be found here.

LESS | Target elements without specific parent class – CSS

I have a HTML structure as shown below

<ul class="list list--sm">
    <li class="list__item list__item--draggable">
        List item 1
          <ul>
              <li class="list__item list__item--draggable">
                  List item 1.1
                    <ul>
                      <li class="list__item list__item--draggable">
                           List item 1.1.1
                      </li>
                    </ul>
              </li>
          </ul>
    </li>
</ul>

Here I want to target the elements with class list__item--draggable that do not have a parent/grandparent with the class list__item--draggable i.e. the element with the text "List item 1". I want to achieve this using LESS. I do not want to use the > selector because it can be a nested structure with few more divs and other elements.

I am not able to think of a solution for this. Can this be achieved?

Tags:

2

Answers


  1. 0

    This is possible even in pure CSS:

    .list__item--draggable:not(.list__item--draggable *) {}

    Try it:

    .list__item--draggable {
  outline: 1px solid black;
}

.list__item--draggable:not(.list__item--draggable *) {
  outline: 1px solid red;
}
    <ul class="list list--sm">
  <li class="list__item list__item--draggable">
    List item 1
    <ul>
      <li class="list__item list__item--draggable">
        List item 1.1
        <ul>
          <li class="list__item list__item--draggable">
            List item 1.1.1
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    It may depend on exactly how you want to style/restyle the children but here’s a simple CSS example which highlights just that first text:

    .list__item--draggable {
  background: yellow;
}

ul ul,
ul ul .list__item--draggable {
  background: white;
}
    <ul class="list list--sm">
  <li class="list__item list__item--draggable">
    List item 1
    <ul>
      <li class="list__item list__item--draggable">
        List item 1.1
        <ul>
          <li class="list__item list__item--draggable">
            List item 1.1.1
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

    Basically, we change every occurence, then we change back those that are children.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search