Select elements that do not have a specific parent class using LESS

Question

Select elements that do not have a specific parent class using LESS

I have created an HTML structure as outlined 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>

In this scenario, my goal is to target elements with the class list__item--draggable that do not have a parent or grandparent with the same class, specifically referring to the element displaying "List item 1". I intend to accomplish this using LESS without utilizing the > selector due to potential complexities in nested structures with additional divs and elements.

I am currently struggling to devise a solution for this dilemma. Is there a way to achieve this task?

javascript css less

Answer 1

Answer №1

With just CSS, you can achieve this:

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

Give it a shot:

.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>

Answer 2

With just CSS, you can achieve this:

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

Give it a shot:

.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>

Answer 3

Answer №2

If you're looking to restyle the children in a specific way, here's a straightforward CSS example that focuses on highlighting only the 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>

In essence, we modify all occurrences and then revert those that are child elements.

Answer 4

If you're looking to restyle the children in a specific way, here's a straightforward CSS example that focuses on highlighting only the 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>

In essence, we modify all occurrences and then revert those that are child elements.

Select elements that do not have a specific parent class using LESS

Answer №1

Answer №2

Similar questions

Using Array.push within a promise chain can produce unexpected results

Secure an input field for exclusive attention. React

Populate Chart.js with a specific set of JSON data

Select2.js Dropdown List with Case Sensitivity

A guide to monitoring and managing errors in the react-admin dataProvider

The steps to display a partial view within another view in React Native

Connecting Checkboxes and Chips Together in Vue js (Bi-Directional Binding)

Is there a way to smoothly transition a FlatList while the keyboard is open?

Sharing environment variables in gulpfile with other JavaScript files outside NODE_ENV

The functionality of cloning in jQuery may encounter an issue where the text field remains enabled if the user selects an option labeled "other

Having trouble retrieving AJAX data [PHP]

Incorporating words into the core of a pie chart: Highcharts

value of object's property set to string "null" if null

Retrieve the response status using a promise

Redefining the onClick function in the Redux 'presentation' component to include parameters

I am experiencing issues with my bootstrap file not working despite providing the correct file path. The styles are not being applied on my webpage

Having trouble including a YouTube iframe code within the document ready function

Tally each div individually and display the count within each div, instead of showing the total count across

Issue with Nivo Lightbox: image not properly centered or resizing correctly

Limit User Input in Android Using JavaScript