{"id":123817,"date":"2025-03-10T09:27:13","date_gmt":"2025-03-10T09:27:13","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-10-useful-css-selectors\/"},"modified":"2025-03-10T09:27:13","modified_gmt":"2025-03-10T09:27:13","slug":"gtmtips-10-useful-css-selectors","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=123817","title":{"rendered":"#GTMTips: 10 Useful CSS Selectors"},"content":{"rendered":"


\n<\/p>\n

.<\/p>\n
  • \n

    selector, selector<\/code> – two selectors separated by a comma are evaluated with EITHER-OR logic when used in a trigger. So you can specify multiple selectors, and as long as one of them matches, the trigger will fire.<\/p>\n<\/li>\n

    These generic selectors are the basis for pretty much everything you do with CSS selectors, so it\u2019s a good idea to learn how they work.<\/p>\n

    2. a[href^=”tel:”]<\/h3>\n

    This selector matches any link element (<\/code>) whose href<\/code> attribute begins with<\/em> the string \u201ctel:\u201d, such as: <\/code>. This is useful for tracking clicks on telephone numbers that have been encoded to use the \u201ctel:\u201d protocol.<\/p>\n

    You can also make it work with email links: a[href^=\"mailto:\"]<\/code>, the SMS protocol: a[href^=\"sms:\"]<\/code>, and the outdated but still prevailing JavaScript protocol: a[href^=\"javascript:\"]<\/code>.<\/p>\n

    3. a[href*=”simoahava.com\u201d]<\/h3>\n

    This selector matches any link element whose href<\/code> attribute contains<\/em> \u201csimoahava.com\u201d. Thus I can use it to weed out (or include) clicks on internal links on my website.<\/p>\n

    4. a[href$=\u201d.pdf\u201d]<\/h3>\n

    This selector matches any link element whose href<\/code> attribute ends with<\/em> \u201c.pdf\u201d. This is useful for tracking PDF links. To measure other filenames, you can simply replace \u201c.pdf\u201d with whatever filetype you want to track.<\/p>\n

    5. div.someElement a<\/h3>\n

    I already covered this in the generic selectors, but there\u2019s a very important use case I should highlight.<\/p>\n

    When working with the Click \/ All Elements<\/strong> trigger, it\u2019s a good idea to add a wildcard check for every element you want to track:<\/p>\n

    Click Element matches CSS selector a[href*=\"simoahava.com\"], a[href*=\"simoahava.com\"] *<\/code><\/p>\n

    In other words, after the actual selector, add a second selector that matches any descendant of that selector. This is useful because the All Elements trigger captures the very element that was clicked. With a nested DOM structure, this might often be something unexpected. For example, if you have a link that looks like this:<\/p>\n

    A click on the link element above will actually land on the <\/code>. By setting the selector to a[href=\"mailto:[email\u00a0protected]<\/a>\"], a[href=\"mailto:[email\u00a0protected]<\/a>\"] *<\/code>, you\u2019re capturing clicks on the link element itself as well as any descendants (including the <\/code>).<\/p>\n

    6. form#myForm option:checked<\/h3>\n

    You can use the pseudo-selector :checked<\/code> to match any checked element. For example, form#myForm option:checked<\/code> looks for any selected <\/code> element(s) in the form. This is useful when you want to identify which element in a drop-down list is currently selected.<\/p>\n

    7. a:not()<\/h3>\n

    The :not<\/code> pseudo-selector matches if the opposite<\/em> of the given selector holds true. So, a selector like a:not([href*=\"simoahava.com\"])<\/code> will match clicks on any links that do not have<\/strong> \u201csimoahava.com\u201d in their href<\/code> attribute value.<\/p>\n

    8. ol > li:first-child<\/h3>\n

    The :first-child<\/code> selector will match the given element that is the first child of its parent. So ol > li:first-child<\/code> will match the first <\/p>\n<\/code> element of an \n<\/code> list.<\/p>\n

    Other similar selectors are :last-child<\/code> (matches the last child of its parent) and :nth-child(N)<\/code> (matches the Nth child of its parent, so :nth-child(3)<\/code> would match the element that is the third child of its parent).<\/p>\n

    9. a[data-gtm-event]<\/h3>\n

    Square brackets denote attributes, and if you leave out the equals sign (=), you can simply check if an element has the given attribute. a[data-gtm-event]<\/code> will match any link element that has the attribute data-gtm-event<\/code> regardless of what the value of that attribute is.<\/p>\n

    10. body > div.site-container > div > div > main\u2026 ARGH<\/h3>\n

    This is actually a tip rather than a useful selector. Try to avoid really long, complex selector chains. The longer chain it is, and the more you insist on direct parent-child relationships (>), the more points of failure you introduce into the selector.<\/p>\n

    All it takes is one element to change along that DOM path and your selector will stop working. Thus, try to always find the most generic selector that is still specific enough to match exactly what you are trying to capture. This requires some knowledge of the HTML structure of your templates.<\/p>\n

    The long, complex selector in this post\u2019s feature image could be replaced simply with:<\/p>\n

    header > h2 > a<\/code><\/p>\n

    and it will be just as accurate, because I know for a fact that my HTML reserves that DOM sequence for the article titles you see on the main page.<\/p>\n

    Summary<\/h2>\n

    And there you have it! These selectors should come in handy when you are tweaking your GTM setup.<\/p>\n

    Do you have any other really useful selectors you\u2019d like to share with others? If you do, please share them in the blog comments!<\/p>\n<\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"

    . selector, selector – two selectors separated by a comma are evaluated with EITHER-OR logic when used in a trigger. So you can specify multiple selectors, and as long as one of them matches, the trigger will fire. These generic selectors are the basis for pretty much everything you do with CSS selectors, so it\u2019s […]<\/p>\n","protected":false},"author":1,"featured_media":123818,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[38655,14492,48890],"dealstore":[],"offerexpiration":[],"class_list":["post-123817","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-css","tag-gtmtips","tag-selectors"],"yoast_head":"\n#GTMTips: 10 Useful CSS Selectors - Som2ny Network<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fivemor.com\/?p=123817\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"#GTMTips: 10 Useful CSS Selectors - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\". selector, selector – two selectors separated by a comma are evaluated with EITHER-OR logic when used in a trigger. So you can specify multiple selectors, and as long as one of them matches, the trigger will fire. These generic selectors are the basis for pretty much everything you do with CSS selectors, so it\u2019s […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=123817\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-10T09:27:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=123817#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=123817\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"#GTMTips: 10 Useful CSS Selectors\",\"datePublished\":\"2025-03-10T09:27:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=123817\"},\"wordCount\":706,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=123817#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg\",\"keywords\":[\"CSS\",\"GTMTips\",\"Selectors\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=123817#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=123817\",\"url\":\"https:\/\/fivemor.com\/?p=123817\",\"name\":\"#GTMTips: 10 Useful CSS Selectors - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=123817#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=123817#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg\",\"datePublished\":\"2025-03-10T09:27:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=123817#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=123817\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=123817#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=123817#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#GTMTips: 10 Useful CSS Selectors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fivemor.com\/#website\",\"url\":\"https:\/\/fivemor.com\/\",\"name\":\"Som2ny Network\",\"description\":\"Daily Deals\",\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fivemor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fivemor.com\/#organization\",\"name\":\"Som2ny Network\",\"url\":\"https:\/\/fivemor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"width\":300,\"height\":86,\"caption\":\"Som2ny Network\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/fivemor.com\"],\"url\":\"https:\/\/fivemor.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"#GTMTips: 10 Useful CSS Selectors - Som2ny Network","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fivemor.com\/?p=123817","og_locale":"en_US","og_type":"article","og_title":"#GTMTips: 10 Useful CSS Selectors - Som2ny Network","og_description":". selector, selector – two selectors separated by a comma are evaluated with EITHER-OR logic when used in a trigger. So you can specify multiple selectors, and as long as one of them matches, the trigger will fire. These generic selectors are the basis for pretty much everything you do with CSS selectors, so it\u2019s […]","og_url":"https:\/\/fivemor.com\/?p=123817","og_site_name":"Som2ny Network","article_published_time":"2025-03-10T09:27:13+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=123817#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=123817"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"#GTMTips: 10 Useful CSS Selectors","datePublished":"2025-03-10T09:27:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=123817"},"wordCount":706,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=123817#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg","keywords":["CSS","GTMTips","Selectors"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=123817#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=123817","url":"https:\/\/fivemor.com\/?p=123817","name":"#GTMTips: 10 Useful CSS Selectors - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=123817#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=123817#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg","datePublished":"2025-03-10T09:27:13+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=123817#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=123817"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=123817#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/03\/10-useful-css-selectors.jpg","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=123817#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"#GTMTips: 10 Useful CSS Selectors"}]},{"@type":"WebSite","@id":"https:\/\/fivemor.com\/#website","url":"https:\/\/fivemor.com\/","name":"Som2ny Network","description":"Daily Deals","publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fivemor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fivemor.com\/#organization","name":"Som2ny Network","url":"https:\/\/fivemor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","width":300,"height":86,"caption":"Som2ny Network"},"image":{"@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","caption":"admin"},"sameAs":["https:\/\/fivemor.com"],"url":"https:\/\/fivemor.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/123817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=123817"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/123817\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/123818"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=123817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=123817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=123817"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=123817"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=123817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}