On a drop down menu I want to move one of the blocks. Is it possible to target this specific ul by using the span class name Riding and Racing? Without effecting any of the other menus.
<ul class="gm-links">
<li class="gm-item gm-heading">
<a class="gm-target js-no-transition">
<span class="gm-text">Riding and Racing</span>
</a>
</li>
</ul>
CSS:
.gm-links ??? {
}
You will need help from Javascript to achieve this. You can get the textContent of the element while running the nodeList or HTML collection through a loop.
const gmText = document.querySelectorAll('.gm-text')
gmText.forEach(li => li.textContent === 'Riding and Racing' ? li.classList.add('format') : '').format {
background-color: black;
color: white;
border-radius: 5px;
padding: 5px 8px;
line-height: 2rem;
}
.format::after {
content: ' - so much fun';
color: #F76F76;
}<ul class="gm-links">
<li class="gm-item gm-heading">
<a class="gm-target js-no-transition">
<span class="gm-text">Riding and Racing</span>
</a>
</li>
<li class="gm-item gm-heading">
<a class="gm-target js-no-transition">
<span class="gm-text">Camping and Fishing</span>
</a>
</li>
<li class="gm-item gm-heading">
<a class="gm-target js-no-transition">
<span class="gm-text">Sleeping and Dreaming</span>
</a>
</li>
</ul>From your comments it seems that you want to add css to ul.gm-links. You can do that with jquery as below. As a sample adding new css class to expected .gm-links.
$(document).ready(function() {
// get span under ul.gm-links with text containing "Riding and Racing"
let span = $('ul.gm-links span:contains("Riding and Racing")');
// get parent ul.gm-links for selected span.
let ul = span.closest('ul.gm-links');
// add class to ul
ul.addClass("test");
});
.gm-links span { }.gm-links .gm-text { }. This will target all gm-text classes inside gm-links classes.