0

I have the following CSS in a local file that's linked to from a page.

span.shabba:nth-child(1):active:after {
  content: 'D';
}
span.shabba:nth-child(2):active:after {
  content: 'E';
}
span.shabba:nth-child(3):active:after {
  shabba:nth: 'F';
}
span.shabba:nth-child(4):active:after {
  shabba:nth: 'A';
}
span.shabba:nth-child(5):active:after {
  shabba:nth: 'B';
}

My question is, through the developer console of Chrome or Firefox, am I able to get the values in that specific order i.e. DEFAB

  • Is there a way to remove :active? I can't see a way to do this
  • Is there a way to initiate :active? I've tried with a mousedown event but no luck

Thanks

pee2pee
  • 3,619
  • 7
  • 52
  • 133
  • What do you mean by *get the values* in that specific order? What do you mean by *get*? – Loi Nguyen Huynh Dec 24 '19 at 10:45
  • I want to console.log or save to a variable, the string I mentioned – pee2pee Dec 24 '19 at 10:56
  • I'm not sure `shabba:nth: 'F';` is a valid CSS, and what's you would do after when get those strings? Your style (CSS) would be static, so you must have known it on time, before your page run, so to get those strings, you just need to store it to a variable. Yet I'm sure what said was not what you want but.. anyway, what do you want to do with those strings? – Loi Nguyen Huynh Dec 24 '19 at 11:05

1 Answers1

0

You can use the following approach. It is much easier and produce the same result. Javascript mentioned in the answer will get you all the values. if you want to remove acitve then just remove the content attribute on the value from span i.e 

<span class='shabba' data-content=''>shabba</span>

you can use data-content on the span to initiate/remove active

Hope this helps!

CSS:

span.shabba:nth-child(1):active:after {
  content: attr(data-content);
}
span.shabba:nth-child(2):active:after {
  content: attr(data-content);
}
span.shabba:nth-child(3):active:after {
   content: attr(data-content);
}
span.shabba:nth-child(4):active:after {
    content: attr(data-content);
}
span.shabba:nth-child(5):active:after {
   content: attr(data-content);
}

JS:

var spans = document.querySelectorAll('.shabba')
spans.forEach(function(item){console.log(item.getAttribute('data-content'))})

HTML

<div>
        <span class='shabba' data-content='D'>shabba</span>
        <span class='shabba' data-content='E'>shabba</span>
        <span class='shabba' data-content='F'>shabba</span>
        <span class='shabba' data-content='A'>shabba</span>
        <span class='shabba' data-content='B'>shabba</span>
</div>
jagpreet
  • 84
  • 1
  • 6