1

Is there a pure CSS way to adjust styling of an element where its only child does not have a class?

For example:

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

And I only want to style "a" containing a child with the class "pro"?

Background is the following: In Buddypress, you have a hook to add a class for avatars:

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

However, since :before / :after-pseudo-classes do not work on images, I need to be able to adjust the wrapping container.

Thanks! Raphael

Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79

3 Answers3

3

No, there currently are no parent selectors purely in CSS. Here's a discussion on it: https://css-tricks.com/parent-selectors-in-css/

However, if you're using Buddypress, jQuery comes autorolled with it. You could add a script to a theme file like the following:

$( "img.pro" ).parent().css( "border", "5px solid red" );
Durthar
  • 157
  • 1
  • 6
  • Thanks. Solution with JS is obvious, but I really don't like to use JS for styling purposes. But I also see no way to add a class to the wrapping container in Buddypress, so... – Raphael Jeger Apr 25 '15 at 06:15
  • You might want to ask that over at the WordPress StackExchange community - they might be able to help you over there find a way to add a class to the wrapping container. – Durthar Apr 25 '15 at 06:17
  • Thanks, I tried that: http://wordpress.stackexchange.com/questions/185336/add-class-to-link-surrounding-avatar – Raphael Jeger Apr 25 '15 at 06:27
1

It seems that there is a discussion about :before and :after for elements that do not contain text.

However, there is a pure CSS way. In this discussion here

Does :before not work on img elements?

TimPietrusky demonstrates it (scroll down). The solution is here at the CodePen:

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

The clever guy uses the content attribute to set text, and once there is text, :after and :before will/should/could apply. Then he designs :before and :after to match his expectations. I like it, but it is a classical "misuse" of side effects that has to be managed on many browsers.

Community
  • 1
  • 1
peter_the_oak
  • 3,529
  • 3
  • 23
  • 37
-1

My first go would be styling the <a class='something'> instead of the img.

ryangus
  • 679
  • 3
  • 8
  • 22
  • I would not have asked this question if it were that easy, right? ;) Please read again: Buddypress as a framework has a hook for the avatar img, but I think there's no hook for the wrapping tag so no chance to add a class there! – Raphael Jeger Apr 25 '15 at 06:16