Как выбрать абзац, который содержит плавающее изображение?

Question

Я хотел бы иметь возможность написать правило CSS, которое применяется к абзацу, но только если этот абзац содержит тег <img> с атрибутом align.Обратите внимание, я не хочу выбирать изображение, но параграф, который содержит его.(Я хочу применить стиль clear: both к абзацу, чтобы убедиться, что на полях есть место для плавающего изображения.) Возможно ли это, используя только правила CSS, поддерживаемые текущими браузерами?

В настоящее время яна самом деле манипулирование HTML-кодом, созданным с помощью инструмента помощи, с использованием сценария постобработки, который я написал, но выполнение этого с помощью CSS было бы гораздо более элегантным и менее проблемным.

Answer 1

У CSS нет родительских селекторов, только потомок.Вы должны будете использовать javascript, чтобы выбрать тег img, а затем вызвать getParent () для него.

в библиотеке JavaScript Mootools:

$('p img[align=*]').getParent();

См. Также:

CSSселекторы: http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

Answer 2

Я так не думаю. Идея о поддержке атрибута "содержит" отброшена, так как браузеры не поддерживают выбор родителей селектора.

Было бы довольно легко сделать это в jQuery: http://jsfiddle.net/2u7fg/1/

$('p').each(function() {
     if ($(this).find('img').attr('align').length)
         $(this).css('background', 'red');
});

РЕДАКТИРОВАТЬ: надеюсь, менее подробная версия (я уверен, что есть лучший способ сделать это) ...

$('img').filter(function() { return $(this).attr('align').length > 0; }).parent().css('background', 'red');

http://jsfiddle.net/2u7fg/2/

Answer 3

Нет CSS-селекторов, которые бы позволяли вам это делать (что по сути является выборочным). Наилучшие варианты поддержки кроссбраузерности:

1. Добавление JS на вашу страницу для обнаружения плавающего изображения, а затем применение класса css к родительскому абзацу.
2. Измените код на месте (если это возможно), чтобы добавить класс css в родительский абзац для любых плавающих изображений.