Есть ли CSS селектор "haschildren"?
35101 просмотра
5 ответа
Возможное дублирование:
есть ли родительский селектор CSS?
Есть ли селектор CSS, который я могу использовать, только если существует дочерний элемент?
Рассмотреть возможность:
<div> <ul> <li></li> </ul> </div>
Я хотел бы применить display:none
к div, только если у него нет хотя бы одного дочернего <li>
элемента.
Любой селектор, который я могу использовать, делает это?
Автор: Chaitanya Источник Размещён: 12.11.2019 09:35Ответы (5)
15 плюса
Нет, к сожалению, это невозможно с CSS-селекторами.
Автор: ThiefMaster Размещён: 30.08.2012 11:1821 плюса
Вроде, :empty
но это ограничено.
Пример: http://jsfiddle.net/Ky4dA/3/
Даже текстовые узлы приведут к тому, что родительский объект не будет считаться пустым, поэтому UL внутри DIV будет препятствовать сопоставлению DIV.
<h1>Original</h1>
<div><ul><li>An item</li></ul></div>
<h1>No Children - Match</h1>
<div></div>
<h1>Has a Child - No Match</h1>
<div><ul></ul></div>
<h1>Has Text - No Match</h1>
<div>text</div>
DIV {
background-color: red;
height: 20px;
}
DIV:empty {
background-color: green;
}
Ссылка: http://www.w3.org/TR/selectors/#empty-pseudo
Если вы идете по сценарию маршрута:
// pure JS solution
var divs = document.getElementsByTagName("div");
for( var i = 0; i < divs.length; i++ ){
if( divs[i].childNodes.length == 0 ){ // or whatever condition makes sense
divs[i].style.display = "none";
}
}
Конечно, jQuery облегчает задачу, подобную этой, но эта задача не является достаточным основанием для включения целой библиотеки.
Автор: Tim Medora Размещён: 30.08.2012 11:223 плюса
К сожалению, у CSS (пока) нет родительских правил, единственный способ обойти это, если вы должны применять его только к родителям, содержащим определенного потомка, - это Javascript или, проще, с библиотекой javascript с именем jQuery .
Javascript может быть в некотором роде написан аналогично CSS, для вашего примера мы бы сделали что-то вроде этого в нижней части нашей HTML-страницы:
<script type="text/javascript">
$('div:has(ul li)').css("color","red");
</script>
(Для этого вам нужно включить библиотеку jQuery в ваш документ, просто вставив в <head></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Автор: Alexander Wigmore
Размещён: 30.08.2012 11:23
2 плюса
Если вы используете jquery, вы можете попробовать эту функцию
jQuery.fn.not_exists = function(){
return this.length <= 0;
}
if ($("div#ID > li").not_exists()) {
// Do something
}
Автор: Infinity
Размещён: 30.08.2012 11:23
2 плюса
Есть еще один вариант
$('div ul').each(function(x,r) {
if ($(r).find('li').length < 1){
$(r).css('display','block'); // set display none
}
})
Автор: Zach dev
Размещён: 30.08.2012 11:39
Вопросы из категории :
- css Как определить, какой из указанных шрифтов был использован на веб-странице?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- css Create a variable in .CSS file for use within that .CSS file
- css Как разместить одно изображение поверх другого в HTML?
- css Как я могу отобразить только часть изображения в HTML / CSS?
- css Удалите все классы, начинающиеся с определенной строки.
- css3 Как я могу изменить порядок моих div с CSS?
- css3 Как заставить div заполнить оставшееся горизонтальное пространство?
- css3 Как нарисовать вертикальный текст с помощью кросс-браузера CSS?
- css3 Разверните div, чтобы взять оставшуюся ширину
- css3 Установить размер на фоновое изображение с помощью CSS?
- css3 Создание CSS3 box-shadow со всех сторон, кроме одного
- css3 Поддерживать соотношение сторон div с CSS
- css3 css селектор для соответствия элементу без атрибута x
- css3 Сделайте высоту div на 100% окна браузера