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

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

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

Рассмотрим:

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

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

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

Ответ 1

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

Ответ 2

Сортировка, с :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

Если вы пройдете маршрут script:

// 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 упрощает задачу таким образом, но эта одна задача не является достаточным основанием для включения целой библиотеки.

Ответ 3

К сожалению, CSS не имеет каких-либо правил родительского права, единственный способ обойти его, если вы должны применить его только к родителям, которые содержат определенный ребенок, с Javascript или более легко с библиотекой javascript под названием jQuery.

Javascript может быть написан в стиле similair для 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>

Ответ 4

Если вы используете jquery, вы можете попробовать эту функцию

jQuery.fn.not_exists = function(){
    return this.length <= 0;
}

if ($("div#ID > li").not_exists()) {
    // Do something
}

Ответ 5

Существует еще один вариант

$('div ul').each(function(x,r) {
    if ($(r).find('li').length < 1){
        $(r).css('display','block'); // set display none
    }
})