Выбрать элемент на основе дочернего класса

Question

Есть ли способ в CSS выбрать элемент, который имеет подэлемент с данным классом?

Я хочу применить стиль к списку <ul>, который имеет <li> с определенным классом.

Answer 1

Это невозможно с помощью css, так как вы работаете против каскада, выбирая предка, основанного на потомке.

Лучшее, что я могу предложить и предложить это JQuery подход:

$(document).ready(
    function() { 
    $('.givenClassName').parent().addClass('something'); 
    } 
); 

Это находит элемент с givenClassName, а затем выбирает свой родительский элемент и добавляет класс something к этому элементу.

@Blaenk предлагает альтернативный подход, который более универсален (его подход не требует, чтобы элемент предка был родителем элемента, который вы выбираете).

Очевидно, что другие JS-библиотеки и JS сами по себе могут добиться такого же эффекта, хотя я не могу предлагать конкретные советы, поскольку я все еще только знакомлюсь с JS и в основном с jQuery (почему да, я am стыдно от себя ...).

Answer 2

ul li { 
    /* styles */ 
} 

Это то, о чем вы просите?

Answer 3

No. Каскад CSS не позволяет использовать этот селектор.

Лучшим решением в этом случае было бы либо изменение DOM с помощью JavaScript, либо изменение итогового HTML для добавления классов в теги ul.

Answer 4

Насколько я знаю, это, к сожалению, невозможно с помощью CSS.

Если вы можете использовать Javascript, jQuery имеет хороший способ сделать это, используя метод closest(). documentation для него даже перечисляет пример, очень похожий на ваш: выбор ul, который имеет li определенного класса.

$("li.some-class").closest("ul"); 

Простите меня, если это не лучший способ сделать это в jQuery. Я на самом деле новичок в jQuery, и это один из методов, который я изучил до сих пор, и это казалось подходящим.