CSS настраивает стиль элемента, где его дочерний элемент имеет класс

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

Например:

<a><img class="avatar pro"></a> 
<a><img class="avatar"></a>

И я хочу только стиль «а», содержащий ребенка с классом «про»?

фона является следующее: В BuddyPress, у вас есть крюк, чтобы добавить класс для аватаров:

add_filter('bp_core_avatar_class', 'filter_bp_core_avatar_class', 10, 4);

Однако, так как: до /: после псевдо-классы не работают на изображениях, я необходимо уметь настраивать контейнер для упаковки.

Спасибо! Raphael

источник

2015-04-25 Raphael Jeger

Нет, в настоящее время нет родительских селекторов исключительно в CSS. Вот обсуждение на нем: https://css-tricks.com/parent-selectors-in-css/

Однако, если вы используете Buddypress, jQuery поставляется с авторолированным с ним. Вы можете добавить скрипт в файл темы, как в следующем:

$("img.pro").parent().css("border", "5px solid red");

источник

2015-04-25 06:14:27 Durthar

Спасибо. Решение с JS очевидно, но я действительно не люблю использовать JS для стилизации. Но я также не вижу возможности добавить класс в контейнер для упаковки в Buddypress, поэтому ... –

Возможно, вы захотите спросить об этом в сообществе WordPress StackExchange - они могут помочь вам там найти способ добавить класса в контейнер для упаковки. – Durthar

Спасибо, я пробовал: http://wordpress.stackexchange.com/questions/185336/add-class-to-link-surrounding-avatar –

-1

Мой первый будет идти стилизации <a class='something'> вместо IMG.

источник

2015-04-25 06:14:32 ryangus

Я бы не задал этот вопрос, если бы все было так просто, не так ли? ;) Пожалуйста, прочитайте еще раз: Buddypress в качестве рамки имеет крючок для аватара img, но я думаю, что нет никакого крючка для тега обертки, поэтому нет возможности добавить класс туда! –

кажется, что дискуссия о :before и :after для элементов, которые не содержит текста.

Однако есть чистый способ CSS. В этой дискуссии здесь

Does :before not work on img elements?

TimPietrusky демонстрирует его (прокрутите вниз). Решение здесь в CodePen:

http://codepen.io/TimPietrusky/pen/xpesA

умный парень использует атрибут content, чтобы установить текст, и когда есть текст, будет/должен/может применяться :after и :before. Затем он разрабатывает :before и :after, чтобы соответствовать его ожиданиям. Мне это нравится, но это классическое «неправильное использование» побочных эффектов, которое должно управляться во многих браузерах.

источник

2015-04-25 06:27:41

кажется багги и работает только в том случае, если img не имеет src на FF, например ... –

Так много для «чистого CSS» в этой ситуации :-) –

CSS настраивает стиль элемента, где его дочерний элемент имеет класс

ответ

Смежные вопросы