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
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:
It seems that there is a discussion about
:beforeand:afterfor 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
contentattribute to set text, and once there is text,:afterand:beforewill/should/could apply. Then he designs:beforeand:afterto match his expectations. I like it, but it is a classical “misuse” of side effects that has to be managed on many browsers.My first go would be styling the
<a class='something'>instead of the img.