Селектор CSS, чтобы получить самый глубокий элемент определенного classа в дереве HTML.
У меня есть куча элементов DIV в моем HTML, некоторые из которых имеют атрибут classа, заданный как «rowsLayout». Некоторые из этих строкLayout DIV могут быть вложены друг в друга. Я хочу определить селектор CSS, который предназначен только для самых глубоких DIV в этих гнездах. То есть, я не хочу, чтобы какой-либо из строкLayout DIVs содержал любые другие DIV-файлы rowLayout.
В этой структуре я хочу селектор, который будет нацелен на b, d и e.
Это можно сделать?
- Селектор CSS, который применяется к элементам с двумя classами
- Разница между CSS-селектором и фильтром jQuery?
- Что означает пробел в селекторе CSS? т.е. в чем разница между .classA.classB и .classA .classB?
- Не селектор CSS
- Селектор CSS, включающий псевдо-class first-child и dropcap
- Что означает .container. \ 31 25 \ 25 в CSS?
- В чем разница между псевдоclassом и псевдоэлементом в CSS?
- Селекторы атрибутов CSS: правила кавычек ("," или none?)
- Почему пространства, используемые для разделения вещей в css
- Могу ли я использовать переменные для селекторов?
- Что делает в CSS?
- Выделите все флажки с помощью jQuery
- LESS CSS: злоупотребление & Operator при вложенности?
Вы можете использовать селектор jQuery .rowsLayout:not(:has(.rowsLayout)) .
Однако по соображениям производительности это невозможно в CSS .
Ваш селектор зависит от детей (или их отсутствия) от элементов, на которые вы нацеливаетесь.
CSS разработан таким образом, что селектора элементов всегда могут быть разрешены до того, как будут существовать дочерние элементы элемента; это позволяет использовать CSS для загрузки документов.
Нет.
Ваши варианты: выберите их по id; добавьте второй class для этих листьев и выберите этот class; используйте javascript-решение для установки соответствующего стиля (возможно, используя второй class).
можете ли вы рассмотреть возможность добавления дополнительного classа, такого как «родительский», к родительским элементам? было бы проще и было бы «стандартным»,
В зависимости от количества divs вы можете сделать что-то вроде:
div#b.rowsLayout,div#d.rowsLayout,div#e.rowsLayout {}
Может быть, есть лучший способ решить вашу проблему, что вы пытаетесь применить ко всем этим divs?
выберите их по ID
#b, #d, #e { /* styles here */ }
любая причина для всех названий повторного classа btw? Вы можете обернуть все это в div из #layout или что-то тогда …
#layout div { /* styles */ }
вместо добавления этого имени classа в div.
Взгляните на это:
div#b:first-of-type { style here }
Почему бы не использовать: пустой?
JQuery Empty
EDIT: он также работает как селектор CSS:
:empty { background-color: black; }
БОЛЬШЕ РЕДАКТОРОВ:
:last-of-type почти работает, но по какой-то причине он получает «а». Посмотри на мою скрипку.
Похоже, что это возможно, используя атрибут: dir или: lang.
Использование: lang предпочтительнее в 2015 году, поскольку оно поддерживается большинством браузеров.
Пример:
.container { padding:20px; } :lang(ar) { direction:rtl; } :lang(en) { direction:ltr; } .container:lang(en) { background-color:blue; } .container:lang(ar) { background-color:red; } .container .a:lang(en) { background-color:orange; } .container .a:lang(ar) { background-color:yellow; }
ltr a rtl a rtl a rtl a ltr a rtl a ltr a ltr a rtl a