Link CSS classes in reverse order?

[Luxus]

I currently have an issue that I can't seem to resolve. I have different usergroups with their own colours. For these usergroups I want to set text-decoration on hover to none. But this is not possible so it seems (or I think) because each unique usergroup class comes in a span inside the a tag:

<a class="username" href="members/luxus.1/"><span class="style3">Luxus</span></a>

So I can't speak to the "username" class without affecting all usergroups. It would be possible if the style3 class is moved to the a tag:

<a class="username style3" href="members/luxus.1/"><span>Luxus</span></a>

Then I would just use this css

.style3:hover
{
    text-decoration: none !important;
}

However my CSS knowledge is not perfect,so maybe it's possible to link css classes in reverse order like this:

.style3 username:hover
{
    text-decoration: none !important;
}

 

[EQnoble]

no you can't select a parent class with css directly...it can be done but not with css alone as far as I know...well not without being hacky about life at least...

you can try it this way...using js


add this to the bottom of the page_container_js_body template right ABOVE the final </script> tag.

$("a:has(.style3)").addClass("noDecoration");

and then add this to extra css...

.noDecoration, noDecoration:hover {
 
text-decoration:none !important;
 
}

 

[Jake Bunce]

You can also try modifying the template helper to move the class like you want:

library/XenForo/Template/Helper/Core.php

The helperUserNameHtml function builds the HTML for that.

 

[Luxus]

add this to the bottom of the page_container_js_body template right ABOVE the final </script> tag.

$("a:has(.style3)").addClass("noDecoration");

How can I add additional styles in one line because style3 is only for administrators. I also have style4, style5, style6, style7, style8 and style9.

 

[EQnoble]

How can I add additional styles in one line because style3 is only for administrators. I also have style4, style5, style6, style7, style8 and style9.

There is other ways to do it that are smaller in character length, but it would not allow you to ignore a style# if you so wanted to down the road.

With that in mind, in one line to select all of those like you asked you would simply do this

$('a:has(.style3, .style4, .style5, .style6, .style7, .style8, .style9)').addClass('noDecoration');

Just replace what you pasted in before with the above.

 

[MagnusB]

There is other ways to do it that are smaller in character length, but it would not allow you to ignore a style# if you so wanted to down the road.

With that in mind, in one line to select all of those like you asked you would simply do this

$('a:has(.style3, .style4, .style5, .style6, .style7, .style8, .style9)').addClass('noDecoration');

Just replace what you pasted in before with the above.

Wouldn't it be just as easy just to use CSS directly? Something like this:

$('a:has(.style3, .style4, .style5, .style6, .style7, .style8, .style9)').css('text-decoration', 'none');

 

[EQnoble]

The way I did it would allow someone with no JS experience to simply edit the css to make changes by changing the noDecoration class styling rules or changing the noDecoration class name to something else entirely and assigning that new rules...the way you show it would make it 10 times more difficult for a novice to customize by playing around.

 

[MagnusB]

True, I was just thinking less lines of code to achieve same result.

 

[EQnoble]

True, I was just thinking less lines of code to achieve same result.

Yeah essentially they are the same but I just figured 'hey if I do it this way and someone wants to tinker they can use the jquery and css snippets and come up with a different use by tweaking it' and this helps people learn and hopefully gives them something to post up in the forums here that can reciprocate which would be a nice constant cycle to see, it is how I learned everything I know.

On that note my jquery was shorter (I may have had to add css manually , but my JQ was type slim )