1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Link CSS classes in reverse order?

Discussion in 'Styling and Customization Questions' started by Luxus, Nov 24, 2012.

  1. Luxus

    Luxus Well-Known Member

    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:

    Code:
    <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:

    Code:
    <a class="username style3" href="members/luxus.1/"><span>Luxus</span></a>
    Then I would just use this css

    Code:
    .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:

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

    EQnoble Well-Known Member

    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.

    Code:
    $("a:has(.style3)").addClass("noDecoration");
     
    
    and then add this to extra css...
    Code:
    .noDecoration, noDecoration:hover {
     
    text-decoration:none !important;
     
    }
     
    Luxus and Jake Bunce like this.
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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 likes this.
  4. Luxus

    Luxus Well-Known Member

    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.
     
  5. EQnoble

    EQnoble Well-Known Member

    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

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

    Just replace what you pasted in before with the above.
     
    Jake Bunce and Luxus like this.
  6. MagnusB

    MagnusB Well-Known Member

    Wouldn't it be just as easy just to use CSS directly? Something like this:
    Code:
    $('a:has(.style3, .style4, .style5, .style6, .style7, .style8, .style9)').css('text-decoration', 'none');
     
  7. EQnoble

    EQnoble Well-Known Member

    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 likes this.
  8. MagnusB

    MagnusB Well-Known Member

    True, I was just thinking less lines of code to achieve same result.
     
    EQnoble likes this.
  9. EQnoble

    EQnoble Well-Known Member

    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 :p )
     

Share This Page