0

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

tripler25
  • 13
  • 2
  • Does this help? https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin – isherwood May 18 '21 at 19:44
  • 1
    Psuedo elements do not exist in the DOM so filtering by them is very difficult (assuming it's possible) and not something jQuery can do out of the box. You would most likely need to write some native JS to do it for you. If you could tell us your goal it's possible that there is an easier way to achieve whatever it is you need to do. – Rory McCrossan May 18 '21 at 19:45
  • 1
    possible duplicate of : https://stackoverflow.com/q/58001666/8620333 – Temani Afif May 18 '21 at 19:49
  • @RoryMcCrossan we can filter by pseudo element ^ but I don't think it's the case with marker – Temani Afif May 18 '21 at 19:51
  • @TemaniAfif you're right, I should have been more specific that I was referring to `::marker` – Rory McCrossan May 18 '21 at 19:53
  • @TemaniAfif Thanks for the plug. The getComputedStyle() and filter is working for me on ::before and ::after elements but isn't for ::marker. Does it require any different property to use? – tripler25 May 18 '21 at 20:26
  • Guys can anyone help here for extracting ::marker pseudo element's content. As per @TemaniAfif 's suggestions I'm able to extract ::before's content. Any help would be great. – tripler25 May 19 '21 at 09:16
  • You should be able to use getComputedStyle() with ::marker (cc @TemaniAfif). However every li will generate a ::marker unless it's display is not list-item - you can't filter to just the li elements with custom ::marker styles unless you specifically check for properties that have been customized. Also your JS has syntax errors and is missing the getComputedStyle() call altogether. – BoltClock May 19 '21 at 17:26

1 Answers1

0

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
    }
    
});
Chan
  • 43
  • 7