0

I'm new to programming, and this is my first post (just signed up!). First, this is for a school assignment, but what I'm trying to accomplish is not required; I simply find the problem interesting. I've failed to find an answer elsewhere, but sorry if I missed it. OK, so my HTML links to leaftlet.js and leaflet.css. The webpage includes a map and also a couple of links in a container (textbox). I need to use non-default colors for the links in this container, so I include the following:

<head>
<style>
section {
    (styling for the container)
}
a:link {
    color:gold;
}
a:visited {
    color:pink;
}
...

And in the body is the <section> where I have the container text and hyperlinks.

Unfortunately, the resulting map's zoom buttons' "+" and "-" then also appear gold and I see from Chrome DevTools that the buttons also use a:link, and the color I have above for a:link, was applied to the buttons automatically. I want the "+" and "-" to remain black (their default).

Is there a way to do this? Is it because of the Leaflet calls? I'd consider styling in-line in the <body> where the container contents are written (e.g. <p><a href="...">Click Here</a></p>), but I'm not sure how to capture all states of the link (i.e. link, visited, hover, active).

Again, I'm sorry if this has been addressed elsewhere that I missed, and would appreciate if someone would direct me there.

My next option would be to roll with it and try to change the background color of the zoom buttons, so at least the gold "+" and "-" will have better contrast.

Thanks!

Falke Design
  • 10,635
  • 3
  • 15
  • 30
789
  • 3
  • 1

1 Answers1

0

The simpelst way would be to apply the a style only to childs of the section.

In your html add a class or id to the section element: <section id="wrapper"> and then apply the styles only to the #wrapper childs:

#wrapper {
    (styling for the container)
}
#wrapper a:link {
    color:gold;
}
#wrapper a:visited {
    color:pink;
}

Another way would be to overwrite the zoom button styles:

.leaflet-control-zoom  a:link, .leaflet-control-zoom  a:visited {
   color: black;
}

Helpful Docs: Selectors Explained, All Selectors

Falke Design
  • 10,635
  • 3
  • 15
  • 30