Есть ли CSS селектор "haschildren"?

css css3

35101 просмотра

5 ответа

1545 Репутация автора

Возможное дублирование:
есть ли родительский селектор CSS?

Есть ли селектор CSS, который я могу использовать, только если существует дочерний элемент?

Рассмотреть возможность:

<div> <ul> <li></li> </ul> </div>

Я хотел бы применить display:noneк div, только если у него нет хотя бы одного дочернего <li>элемента.

Любой селектор, который я могу использовать, делает это?

Автор: Chaitanya Источник Размещён: 30.08.2012 11:16

Ответы (5)

15 плюса

252321 Репутация автора

Решение

Нет, к сожалению, это невозможно с CSS-селекторами.

Автор: ThiefMaster Размещён: 30.08.2012 11:18

21 плюса

48611 Репутация автора

Вроде, :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:22

3 плюса

2718 Репутация автора

К сожалению, у 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 плюса

2421 Репутация автора

Если вы используете 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 плюса

1527 Репутация автора

Есть еще один вариант

$('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
Вопросы из категории :
32x32