In Squarespace Adirondack theme, how do I target an individual nav item with CSS?

Question

Using the Squarespace Adirondack theme, I need to make one nav item a different color ("shop kids"), and when I target its id starting with yui_ etc. it does not work because the id keeps changing - it seems that the nav item id gets auto-generated by Squarespace. I can change the colors of the nav items globally with no problem using css, but my requirements here are to make one nav item EE258F (pink) in both the visited and active states. Is this possible?

https://shara-karasic-4b4j.squarespace.com/

Answer 1

You can target that link specifically by selecting it in CSS based on its href attribute, like so:

#main-navigation a[href*='fireandcremekids.com']:visited,
#main-navigation a[href*='fireandcremekids.com']:active {
    color: #EE258F;
}

Answer 2

Target that link by attribute.

Do it with jQuery:

$('a[href="fireandcremekids.com"]')

OR Css:

main-navigation .nav-wrapper a[href='fireandcremekids.com']

Answer 3

Try this:

#main-navigation .nav-wrapper li:last-child a,
#main-navigation .nav-wrapper li:last-child a:visited{
    color: #EE258F;
}