[Resolved] CSS selector for text only links

Home Forums Support [Resolved] CSS selector for text only links

Home Forums Support CSS selector for text only links

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1032336
    drew

    I’m running into an issue where I want to apply some custom transition styles for text links but since the default button styles rely on the standard a selector and styles are getting added to buttons as well.

    What’s your recommendation for preventing the text link styles from applying to buttons?

    Page where text styles applying as intended: https://hoytartcenter.wpengine.com/
    Page where buttons are impacted: https://hoytartcenter.wpengine.com/creativeplay/

    Here’s the existing CSS:

    #main a {
      text-decoration: none;
      padding-left: 0.125em;
      padding-right: 0.125em;
      padding-bottom: 0.05em;
    	border-bottom: 0.0625em dotted #AC2016;
      position: relative;
    }
    
    #main a::after {
      content: '';
      position: absolute;
      top: 100%;
      border-bottom: 0.125em solid #00AA00;
      transition: all 0.35s;
    	  left: 0;
      right: 100%;
    }
    #main a:hover::after {
      transition: all 0.35s;
    	right: 0;
    }
    #1032342
    Leo
    Staff
    Customer Support

    Hi there,

    You could look into using the :not selector:
    https://www.w3schools.com/cssref/sel_not.asp
    https://developer.mozilla.org/en-US/docs/Web/CSS/:not

    You can see lots of examples here as well:
    https://generatepress.com/forums/search/%3Anot/

    Hope this helps!

    #1032347
    drew

    Thanks Leo, that was my first thought as well but it doesn’t seem to apply on something like #main a:hover::after

    I was using :not(.button) so I ended up with #main a:hover::after:not(.button) but that wasn’t working. I fell like I may be missing something. Thoughts?

    #1032351
    Leo
    Staff
    Customer Support

    What if you do this?
    #main a:not(.button):hover::after

    #1032360
    drew

    There we go, thanks so much!

    #1032361
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.