4

I have this simple html code. I need to be able to determine if the ::before is being applied to .icon-player-flash

    <div id="TestSwitch">

        <i class="icon-player-html5"></i>

        <i class="icon-player-none"></i>

        <i class="icon-player-flash"></i>

    </div>

enter image description here

I thought this would work but it's always returning 0 for the length.

var flashplayer = $(".icon-player-flash:before");
console.log("count: " + flashplayer.length);

What am I missing?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Kathy Judd
  • 715
  • 3
  • 9
  • 21
  • You cannot select elements with pseudo css tags, afaik – Taplar Sep 18 '19 at 22:52
  • The bigger question though, is if you have a rule defined for it, why do you think it would not be applied to it? – Taplar Sep 18 '19 at 22:53
  • ok, if I use $(".icon-player-flash"); then how can I determine if ::before is being applied to it? – Kathy Judd Sep 18 '19 at 22:54
  • Again, why would it not be applied to it? You're not explaining what the issue is. You're only asking about your issue with a solution you tried. This is by definition the [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – Taplar Sep 18 '19 at 22:55
  • I'm trying to determine when it's being applied. If it's not applied then that option isn't selected. Before you argue on the best practices, it's not my code and that's what I have to work with. – Kathy Judd Sep 18 '19 at 22:57
  • 1
    The ::before will be applied if the element matches the rule. You should know what criteria defines the ::before rule. Given that, you should be able to test if the element matches that rule, and if it does, the ::before would be applied to it. Example being if your css rule is `.icon-player-flash::before {}` then all you have to do is test if the element has the class of `icon-player-flash` – Taplar Sep 18 '19 at 22:58

1 Answers1

5

Use getComputedStyle and check the value of content. If it's none then the pseudo element isn't defined:

var elem = document.querySelector(".box");
var c = window.getComputedStyle(elem,"before").getPropertyValue("content");
console.log(c);

var elem = document.querySelector(".alt");
var c = window.getComputedStyle(elem,"before").getPropertyValue("content");
console.log(c);
.box:before {
  content:"I am defined"
}
<div class="box"></div>

<div class="alt"></div>

This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

none

The pseudo-element is not generated. ref

If you want to count simply consider a filter:

const elems = document.querySelectorAll('div');
const divs = [...elems].filter(e => {
   var c = window.getComputedStyle(e,"before").getPropertyValue("content");
  return c != "none"
});

console.log(divs.length)
.box:before {
  content:"I am defined"
}
<div class="box"></div>
<div class="box alt"></div>

<div class="alt"></div>
<div ></div>
Community
  • 1
  • 1
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 2
    `$(this).get(0);` <= is effectively the same as `1 + 1 - 1`. You're wrapping the element, and then unwrapping it. – Taplar Sep 19 '19 at 14:25