Проблема приоритета селектора CSS

Question

Мне нужно написать селектор, похожий на:

div#content > section (.left > img) + .left

но очевидно, что круглые скобки игнорируются. Как мне переписать это? Или это невозможно в простом CSS?

Answer 1

Нет, вы не можете выбрать что-то в CSS на основе того, что оно содержит, что по сути является тем, что вы пытаетесь сделать в скобках.

Лучше всего объяснить этот вопрос в SO.

Answer 2

То, что вы пытаетесь сделать, невозможно, по крайней мере, не в последней спецификации css3.

Если вы не хотите добавлять через сервер, может быть, немного JQuery?

Посмотри на эту скрипку, так как она очень легко делает то, что ты хочешь

http://jsfiddle.net/4qZpc/2/embedded/result/ - результаты!

Возьмите код: http://jsfiddle.net/4qZpc/2/

Answer 3

Вы должны добавить серверный класс .image_in_it для каждого элемента с .left class , если , он содержит элемент img.

<div id="content">
    <section>
        <div class="left image_in_it">
            <img src="" alt="">
        </div>
        <div class="left">
        </div>
    </section>
</div>

, а затем div#content > section > .left.image_in_it + .left выберет любой .left, следующий непосредственно за .left.image_in_it

Answer 4

Как насчет присвоения разделу идентификатора (при условии, что у вас есть несколько разделов), а затем выполнить что-то вроде:

#content-section img + .left

Я не совсем уверен, какого эффекта вы пытаетесь достичь, но если нет особого случая, когда элемент .left непосредственно следует за img, отличным от этого, вы должны быть в безопасности.

В качестве альтернативы, если у вас есть вложенные элементы .left, вы можете сделать:

#content-section img + .inner-left