'How to select and manipulate specific <li> elements present with pseudo-elements such as ::marker, ::before using javascript

I'm looking for a way to access the <li> elements present with pseudo-elements such as ::before and ::marker using Javascript. So far I'm not able to write a unique selector for those <li> elements which can highlight only those which are present with ::before or ::marker. Any ideas would be great.

document.querySelectorAll('div.simple-description"] li').forEach((li) => {
  if ((li.querySelector('li'), 'marker') === "marker") {
    li.setAttribute('bullet', "true")
  }
})
<div class="simple-description">
  <p>Sample data Sample data Sample data Sample data</p>
  <li>Without marker</li>
  <li>::marker DATA with ::marker</li>
  <li>::marker Want to access this</li>
  <li>::before Data with ::before</li>
</div>

Sample URL to try this on: https://www.windeln.de/aussie-spuelung-repair-miracle.html

javascripthtmljquerycsscss-selectors


Solution 1:[1]

Cannot get by selector just loop through ol and get the li type

$("ol").each(function() {
                    
    var thisType = $(this).attr("type"); //get type
    
    if (thisType == "1" || thisType == "a") { //filter by what type
        $(this).find('li'); //your element
    }
    
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chan

Related Questions