CSS selector for GTM trigger that is not specific to any particular element

I am attempting to develop a CSS selector that can target the specific entries within the page-top-menu:

Header menu - Menu 1
DE
#page-top-menu > div > div.menu-wrapper > ul > li.i39.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a
EN
#page-top-menu > div > div.menu-wrapper > ul > li.i40.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a
FR
#page-top-menu > div > div.menu-wrapper > ul > li.i28.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a


Header menu - Menu 2

DE 
#page-top-menu > div > div.menu-wrapper > ul > li.i43.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a
EN
#page-top-menu > div > div.menu-wrapper > ul > li.i43.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a
FR
#page-top-menu > div > div.menu-wrapper > ul > li.i40.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a

All of these elements share the following similarity:

#page-top-menu > div > div.menu-wrapper > ul > li

However, when I attempt to use the selectors below as triggers, they do not have any effect:

#page-top-menu > div > div.menu-wrapper > ul
#page-top-menu > div > div.menu-wrapper > ul > li
#page-top-menu > div > div.menu-wrapper > ul > li > *

The triggers only work when using the full CSS selectors.

EDIT:

Below is an example of one of the HTML elements (The highlighted section is the one targeted by the selector):

https://i.sstatic.net/gecPJ.png

Here is a visual representation of how the Tags and triggers are configured:

https://i.sstatic.net/9cR0b.png

csstriggerscss-selectorsgoogle-tag-manager

Answer №1

The issue at hand is related to the presence of child elements within your a element. When you click on an element inside the a tag, the click event may be triggered, but it will point to the inner tag instead. There are two ways to address this problem:

1) Target all children elements across multiple levels:

Type: Click - All Elements

CSS selector: 

#page-top-menu > div > div.menu-wrapper > ul > li *

2) Target only the link itself:

Type: Click - Just Links

CSS selector: 

#page-top-menu > div > div.menu-wrapper > ul > li > a

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...

htmlcsstwitter-bootstrap

Issue with jQuery DataTables column.width setting failing to meet expectations

Currently, I am utilizing datatables for my project. According to the datatables documentation found here, it suggests using the columns.width option to manage column width. However, when I implement columns.width and render the table, it seems to disreg ...

jqueryhtmlcssdatatables

Setting a background-image using jQuery in Codeigniter can be done by following these steps

Currently, I am developing a project in Codeigniter. In my jQuery file, I have included code to set the background image of the body element: $('body').css('background-image','url(<?php echo base_url("assets/images/bg2.png");?& ...

phpjquerycsscodeigniter

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

javascripthtmlcss

Using jQuery to trigger a Bootstrap modal when a button is clicked

I've been attempting a simple task, but it appears to be unsuccessful. I'm trying to handle the click event of a button inside a bootstrap modal, and so far, nothing happens when clicking the button. My guess is that my jQuery selector for select ...

jqueryhtmlcsstwitter-bootstrap

Highlighting the selected tab with an active class

Currently in the process of learning angularJs, I am still new to it and attempting to dynamically add an active class to the recently clicked tab. Within my interface, there are four tabs: insert, view, update & delete. My goal is to apply the active ...

htmlcssangularjs

Having trouble changing font color using AngularJS - what am I missing?

I am currently working on a straightforward program where the user inputs text into a textbox, and that text is displayed below. However, I also want the font color to change based on what the user types in the "color" field. Why isn't this functional ...

cssangularjsstyles

Exclusive workshop on concealing H1 header in Jumbotron

Trying to make a Jumbotron's height 100% of the user's browser window with a special class, but running into issues on mobile devices as a div within the jumbotron is covering up the headline. Any suggestions for a fix? Live link: HTML <di ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

I am looking to implement a feature in my quiz application where a green tick mark appears next to the question number for the correct answer and a red cross mark for the wrong answer

My HTML code here retrieves questions from a database and displays them based on the question number. <h4>{{indexOfelement+1}}</h4>&nbsp;&nbsp; In my CSS, I need to style the questions as follows: How can I achieve this? Each question ...

cssangular

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

htmlcssflexboxoverflowtrailing-whitespace

Twice the clicking actions triggered by the event

Whenever I try to trigger a function by clicking on the label text, the click event seems to be firing twice. HTML <label class="label_one"> Label One <input type="checkbox"/> </label> However, if I modify the HTML code as f ...

javascriptjqueryhtmlcss

It is not possible to highlight the text that appears in the title of the tooltip in React MUI

Within my react application, there is a component that utilizes the code snippet below: <FormControlLabel labelPlacement="top" control={ comp?.manualInput ? ( <TextField name="price" type= ...

cssreactjsmaterial-ui

I require assistance in developing a mouseover image link that conceals the top image and unveils a bottom image that scrolls vertically in the exact same area as the top

I am trying to achieve a similar effect as shown on: this website I require assistance in creating a mouseover image link that hides the top image and reveals a bottom image that scrolls vertically within the same space as the top image. The long vertica ...

javascripthtmlcssmouseoveronmouseover

What is the best way to ensure that an element remains active even after a page refresh?

I have been using this code to activate the current element, which I came across on a website called "w3schools.com". However, whenever I refresh the page, the currently active element disappears. Is there a way to ensure that the active element remains hi ...

javascripthtmlcss

Preventing absolute div from spilling out of its parent container

Within a parent container, I have a lengthy div. I believe that it needs to be positioned absolutely in order to allow horizontal scrolling. My goal is to only display the portion inside the parent div. I attempted setting overflow: hidden on the parent ...

csshtmllayout

No specified margin at the top of the website's header section

My task was to design the header section of a webpage to resemble this desired webpage look. I started by creating a "header" tag as a container and added a navbar within it. To display the items, I used an unordered list with CSS adjustments for a horizon ...

htmlcsshtml-listsnavbarmargin

Vertical tab design in Bootstrap does not automatically switch tabs

I'm managing two separate tab boxes that switch content when clicked or over a 5-second period. The left box is functioning correctly, but the right box is changing the active state without updating the content. Here's the HTML for the left box ...

javascriptjqueryhtmlcsstwitter-bootstrap

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

htmlcss

Align the user profile picture and username vertically in the header using CSS

I was able to perfectly align the header vertically until I decided to add the user's profile picture, and now I can't seem to get it right. After numerous attempts, this is what I've come up with: HTML/PHP: <ul id="right-side"> & ...

phphtmlcss

Executing a click on a link without any identifying class or ID in Selenium

Is there a way to programmatically interact with this link in Python using Selenium? I have successfully navigated to the webpage and clicked on other links that had specific IDs. However, this particular link does not have an ID or name associated with it ...

pythonseleniumxpathcss-selectorswebdriverwait