英文:
LESS | Target elements without specific parent class
问题
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.
我想要选择具有类list__item--draggable的元素，但其父元素/祖父元素没有类list__item--draggable，即具有文本"List item 1"的元素。我想使用LESS来实现这一点。我不想使用>选择器，因为它可能是一个具有更多div和其他元素的嵌套结构。
英文:
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?
答案1
得分: 1
这在纯CSS中也是可能的：
.list__item--draggable:not(.list__item--draggable *) {}
尝试一下：
<!-- 开始片段: js 隐藏: true -->
<!-- 语言: lang-css -->
.list__item--draggable {
outline: 1px solid black;
}
.list__item--draggable:not(.list__item--draggable *) {
outline: 1px solid red;
}
<!-- 语言: lang-html -->
<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>
<!-- 结束片段 -->
[1]: https://caniuse.com/css-has
<details>
<summary>英文:</summary>
This is possible even in pure CSS:
```css
.list__item--draggable:not(.list__item--draggable *) {}
Try it:
<!-- begin snippet: js hide: true -->
<!-- language: lang-css -->
.list__item--draggable {
outline: 1px solid black;
}
.list__item--draggable:not(.list__item--draggable *) {
outline: 1px solid red;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
以下是已翻译的内容：
.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>
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.list__item--draggable {
background: yellow;
}
ul ul,
ul ul .list__item--draggable {
background: white;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Basically, we change every occurence, then we change back those that are children.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论