Style class being applied to element classList, but is being overridden by element's initial styling

My site, at full desktop size (after 1300px), will have :hover and :active stylings applied to my nav "buttons" (just <a> tags), which will give the buttons a simple 3D shadow look when hovered and clicked. When they're hovered, the buttons move slightly, and when clicked on, they move again to look like they're being pressed down, using a slight margin change and resizing of the box-shadow. I want to have this desktop effect somewhat emulated for mobile nav. So, in lieu of :hover and :active, for mobile I've added event listeners to the nav buttons (only applied pre-1300px of course) listening for "touchstart" and "touchend" events. touchstart (finger pressdown) adds the style class emulating the effect (.mobileClickEffect), and touchend (lifting finger) takes the class away. The .mobileClickEffect class is being successfully added and taken away as I wanted, but as you can see in the picture, for my <button>s, the .mobileClickEffect stylings are nevertheless getting overridden in CSS by the <button>'s own initial styling - despite being declared later and coming last in the <button>'s classList in the html. I'm trying to figure out what is causing this overriding behavior.. I thought the last class added to an element would have the controlling styling? Git: https://github.com/nnall/Portfolio.git Live: https://nnall.github.io/Portfolio/ #

GitHub

GitHub - nnall/Portfolio

Contribute to nnall/Portfolio development by creating an account on GitHub.